/* ==========================================================================
   aleJAB × Iberozoa — Plurirregional 2026
   Identidad tomada de manejoholistico.net (captura del Internet Archive,
   21-ene-2026), no inventada:
     texto   #524D49  gris cálido — es su color dominante, no usan negro
     lima    #B5C034  acento verde
     teja    #E35825  acento de acción (en su web: FAQ y ACCESO)
     tipo    Montserrat 400 / 500 / 600 / 700
   Formato visual del nicho: foto real de campo + banda de texto sólida encima.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --tinta:#524D49;          /* gris cálido: texto y fondos oscuros */
  --tinta-fuerte:#3B3733;
  --tinta-suave:#77716B;   /* 4,8:1 sobre blanco — antes #857E77 daba 4,0 y no llegaba a AA */
  --lima:#B5C034;
  --lima-oscuro:#717918;   /* 4,7:1 sobre blanco — antes #8E981F daba 3,2 */
  --teja:#E35825;
  --teja-oscuro:#C44415;
  --blanco:#fff;
  --hueso:#FAF9F7;
  --linea:#E6E2DD;
  --sombra:0 1px 2px rgba(82,77,73,.05), 0 10px 30px rgba(82,77,73,.07);
  --sombra-alta:0 2px 8px rgba(82,77,73,.09), 0 24px 56px rgba(82,77,73,.14);
  --texto:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ancho:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--teja-oscuro); text-decoration-thickness:1px; text-underline-offset:3px}
.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 24px}

/* ---------- Aparición al entrar en pantalla ---------------------------------
   Un solo criterio para toda la página: lo que entra, entra igual. Es lo que
   da sensación de pieza acabada en vez de efectos sueltos.
   -------------------------------------------------------------------------- */
.surge{opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.surge.visto{opacity:1; transform:none}
.surge[data-tarde="1"]{transition-delay:.10s}
.surge[data-tarde="2"]{transition-delay:.20s}
.surge[data-tarde="3"]{transition-delay:.30s}
.surge[data-tarde="4"]{transition-delay:.40s}
@media (prefers-reduced-motion: reduce){
  .surge{opacity:1 !important; transform:none !important; transition:none !important}
  .portada > img{animation:none}
}

/* etiqueta de sección: versalitas espaciadas, muy suyo */
.rotulo{font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lima-oscuro); margin:0 0 12px}

/* ---------- Barra ---------- */
.barra{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linea)}
.barra-in{max-width:var(--ancho); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap}

/* Marca: rótulo tipográfico. NO es el logotipo real de aleJAB
   (el suyo es un dibujo a mano). Sustituir por su archivo cuando lo envíen. */
.marca{display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--tinta)}
.marca b{font-weight:700; font-size:1.22rem; letter-spacing:-.01em}
.marca b i{font-style:normal; color:var(--lima-oscuro)}
.marca span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave)}
.marca .equis{font-size:.95rem; color:var(--tinta-suave); font-weight:400; margin:0 2px}
.marca img{height:30px; width:auto; align-self:center}
/* sobre fondo oscuro el logotipo marrón no lee: se pasa a blanco */
.crm-barra .marca img, .acceso-marca .marca img, .pie .marca img{
  filter:brightness(0) invert(1); opacity:.92}
@media(max-width:520px){ .marca img{height:24px} }
.barra .sep{flex:1}
.barra nav{display:flex; gap:22px}
.barra nav a{color:var(--tinta); text-decoration:none; font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase}
.barra nav a:hover{color:var(--teja-oscuro)}

/* Sello de aval. Placeholder tipográfico: NO reproduce la marca del Savory
   Institute. Sustituir por su logotipo oficial. */
.aval{display:inline-flex; flex-direction:column; line-height:1.25; padding:6px 13px;
  border:1px solid var(--linea); text-decoration:none}
.aval small{font-size:.57rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave)}
.aval strong{font-size:.73rem; letter-spacing:.06em; color:var(--lima-oscuro); font-weight:700}
/* en móvil la cabecera se apilaba en tres filas: el aval sigue en el pie */
@media(max-width:820px){
  .aval{display:none}
  .barra nav{gap:16px}
  .barra nav a{font-size:.72rem; letter-spacing:.08em}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border:1px solid transparent; border-radius:3px;
  font:600 .82rem/1 var(--texto); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:background .16s, color .16s, border-color .16s}
.btn-teja{background:var(--teja-oscuro); color:#fff}   /* 5,0:1 con el blanco; el teja claro daba 3,7 */
.btn-teja:hover{background:#A6380F}
.btn-lima{background:var(--lima); color:var(--tinta-fuerte)}
.btn-lima:hover{background:var(--lima-oscuro); color:#fff}
.btn-linea{background:transparent; color:var(--tinta); border-color:#CFC8C0}
.btn-linea:hover{border-color:var(--tinta); background:var(--hueso)}
.btn-blanco{background:#fff; color:var(--tinta-fuerte)}
.btn-blanco:hover{background:var(--hueso)}

/* ---------- Portada: foto + banda sólida (el formato del nicho) ---------- */
.portada{position:relative; background:var(--tinta); min-height:min(92vh,860px);
  display:flex; align-items:flex-end; overflow:hidden}
.portada > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%;
  animation:respira 26s ease-in-out infinite alternate}
@keyframes respira{ from{transform:scale(1)} to{transform:scale(1.07)} }
/* degradado de verdad, no una capa plana: deja ver la foto arriba y aísla el texto abajo */
.portada::after{content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top,
    rgba(28,26,22,.94) 0%, rgba(28,26,22,.80) 26%,
    rgba(28,26,22,.42) 55%, rgba(28,26,22,.14) 80%, rgba(28,26,22,.28) 100%)}
.portada .contenedor{position:relative; z-index:1; padding-top:120px}
.banda{display:inline-block; background:var(--lima); color:var(--tinta-fuerte);
  padding:9px 20px; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.portada h1{color:#fff; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.2vw,3.7rem); line-height:1.08; margin:20px 0 0; max-width:17ch}
.portada h1 em{font-style:normal; color:var(--lima)}
.portada .entradilla{color:rgba(255,255,255,.9); font-size:clamp(1rem,1.9vw,1.16rem);
  max-width:56ch; margin:20px 0 0}
.portada .acciones{display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 0; padding-bottom:64px}

/* franja de cifras, pegada al pie de la portada */
.cifras{position:relative; z-index:1; background:var(--tinta-fuerte); color:#fff}
.cifras .contenedor{display:flex; flex-wrap:wrap; gap:0; padding-inline:24px}
.cifra{flex:1 1 170px; padding:22px 22px 22px 0; margin-right:22px;
  border-right:1px solid rgba(255,255,255,.14)}
.cifra:last-child{border-right:0; margin-right:0}
.cifra b{display:block; font-size:1.75rem; font-weight:700; color:var(--lima); line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cifra span{font-size:.75rem; letter-spacing:.05em; color:rgba(255,255,255,.72); line-height:1.4;
  display:block}

/* ---------- Secciones ---------- */
.seccion{padding:78px 0}
.seccion.amplia{padding:110px 0}
@media(max-width:700px){.seccion{padding:58px 0}.seccion.amplia{padding:72px 0}}
.seccion.hueso{background:var(--hueso); border-block:1px solid var(--linea)}
.seccion-cab{max-width:60ch; margin-bottom:40px}
.seccion-cab h2{font-weight:700; letter-spacing:-.015em; margin:0;
  font-size:clamp(1.6rem,3.2vw,2.25rem); line-height:1.2; color:var(--tinta-fuerte)}
.seccion-cab p{color:var(--tinta-suave); margin:14px 0 0}

/* ---------- Tarjetas de curso ---------- */
.rejilla{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.tarjeta{background:#fff; border:1px solid var(--linea); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:box-shadow .2s, transform .2s}
.tarjeta:hover{box-shadow:var(--sombra-alta); transform:translateY(-3px)}
/* 🔴 27-08-2026 · Sin esta línea los filtros NO filtran. El script pone
   `tarjeta.hidden = true`, y el navegador oculta lo que lleva [hidden] con una
   regla suya… que pierde contra CUALQUIER regla de la hoja de estilos. Como
   `.tarjeta` declara `display:flex` dos líneas más arriba, la tarjeta seguía
   pintándose y los botones «En finca», «Online» y la provincia no hacían nada.
   Al aviso de «no hay cursos» no le pasa porque no declara `display`. */
.tarjeta[hidden]{display:none}
.tarjeta-foto{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--hueso)}
.tarjeta-foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s;
  /* vienen de móviles distintos: un pase común las iguala */
  filter:saturate(1.06) contrast(1.04) brightness(1.01)}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.04)}
.distintivos{position:absolute; top:0; left:0; display:flex; flex-wrap:wrap; z-index:2}
.dist{font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 13px; background:var(--lima); color:var(--tinta-fuerte)}
.dist-teja{background:var(--teja-oscuro); color:#fff}
.dist-tinta{background:var(--tinta-fuerte); color:#fff}
.tarjeta-cuerpo{padding:22px; display:flex; flex-direction:column; flex:1}
.tarjeta h3{font-size:1.15rem; font-weight:700; line-height:1.3; margin:0 0 6px; color:var(--tinta-fuerte)}
.tarjeta .lugar{font-size:.86rem; color:var(--tinta-suave); margin:0 0 16px}
.tarjeta-pie{margin-top:auto; padding-top:16px; border-top:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.tarjeta-pie .ver{font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teja-oscuro); white-space:nowrap}
.tarjeta-pie .cuando{font-size:.82rem; color:var(--tinta-suave); white-space:nowrap}
.tarjeta-pie .ejemplo{white-space:nowrap; letter-spacing:.06em; padding:4px 8px; font-size:.6rem}

/* ---------- Los cuatro pasos ----------------------------------------------
   Escritorio: cuatro columnas unidas por una línea horizontal que pasa por el
   centro de los números. Móvil: se convierte en línea vertical.
   Aparecen escalonados al entrar en pantalla (ver el script de index.html).
   -------------------------------------------------------------------------- */
.pasos{list-style:none; margin:0; padding:0; display:grid; gap:30px;
  grid-template-columns:repeat(4,1fr); position:relative}

/* la línea que une los pasos */
.pasos::before{content:''; position:absolute; left:0; right:0; top:27px; height:2px;
  background:linear-gradient(to right, var(--linea) 0%, var(--linea) 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s}
.pasos.dentro::before{transform:scaleX(1)}

.paso{position:relative; padding-right:14px;
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i) * 120ms + 250ms)}
.paso.dentro{opacity:1; transform:none}

.paso-n{position:relative; z-index:1; display:grid; place-items:center;
  /* al pasar la vaca se lo come y luego vuelve a crecer */
  transition:background-color 1.1s ease, color 1.1s ease,
             transform .45s cubic-bezier(.34,1.56,.64,1);
  width:56px; height:56px; background:var(--lima); color:var(--tinta-fuerte);
  font-size:1.05rem; font-weight:700; letter-spacing:.02em; margin-bottom:20px;
  box-shadow:0 0 0 8px var(--hueso);   /* recorta la línea alrededor del número */
  transition-delay:calc(var(--i) * 120ms + 300ms)}
.paso-n.comido{background:#C9B898; color:rgba(59,55,51,.42)}
.paso:not(.dentro) .paso-n{transform:scale(.55)}

.paso h3{font-size:1.04rem; font-weight:700; color:var(--tinta-fuerte); margin:0 0 8px;
  line-height:1.3}
.paso p{font-size:.93rem; color:var(--tinta-suave); margin:0; line-height:1.6}

/* Móvil: la línea pasa a vertical y los pasos se apilan */
@media(max-width:760px){
  .pasos{grid-template-columns:1fr; gap:0}
  .pasos::before{left:27px; right:auto; top:0; bottom:34px; width:2px; height:auto;
    transform:scaleY(0); transform-origin:top center;
    transition:transform 1.2s cubic-bezier(.22,.61,.36,1) .15s}
  .pasos.dentro::before{transform:scaleY(1)}
  .paso{display:grid; grid-template-columns:56px 1fr; column-gap:20px;
    padding:0 0 30px 0; transform:translateX(14px)}
  .paso.dentro{transform:none}
  .paso:last-child{padding-bottom:0}
  .paso-n{margin-bottom:0; width:56px; height:56px; box-shadow:0 0 0 6px var(--hueso)}
  .paso h3{grid-column:2; margin-top:14px}
  .paso p{grid-column:2}
}

/* Quien haya pedido menos animación, la ve estática */
@media (prefers-reduced-motion: reduce){
  .paso, .paso-n, .pasos::before{transition:none !important}
  .paso{opacity:1 !important; transform:none !important}
  .paso-n{transform:none !important}
  .pasos::before{transform:none !important}
}

/* Sección «qué es»: dos columnas en escritorio, para que el texto acompañe al
   ancho del prado a sangre en vez de quedarse en una columna estrecha. */
.dos-columnas{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start}
.dos-columnas > :first-child{margin-top:0}
@media(max-width:900px){ .dos-columnas{grid-template-columns:1fr; gap:24px} }
.dos-columnas .destacado{font-size:1.28rem}
.tras-prado{max-width:64ch; margin:22px auto 0; text-align:center}

/* la vaca que recorre el carril comiéndose los números */
.vaca{position:absolute; z-index:3; width:52px; height:30px; left:0; top:0;
  pointer-events:none; opacity:0; transition:opacity .6s ease .5s}
.pasos.dentro .vaca{opacity:1}
.vaca svg{width:100%; height:100%; display:block; overflow:visible}
@media(max-width:760px){ .vaca{width:42px; height:24px} }
@media (prefers-reduced-motion: reduce){ .vaca{display:none} }

/* ---------- Pastoreo: prado continuo, sin parcelas -------------------------
   El pasto es un campo continuo, no una cuadrícula. El rebaño se mueve solo
   buscando hierba alta, y se le puede llevar haciendo clic.
   -------------------------------------------------------------------------- */
.pastoreo{margin:40px 0 0}
/* A sangre: se sale del contenedor y ocupa todo el ancho de la pantalla.
   Es lo que quita la sensación de contenido encajonado en pantallas grandes. */
.pastoreo.sangre{
  --util:calc(100vw - var(--barra, 0px));
  width:var(--util); max-width:none;
  margin-left:calc(50% - var(--util)/2);
  margin-right:calc(50% - var(--util)/2)}
.pastoreo.sangre .pastoreo-marco{border-radius:0; box-shadow:none;
  border-block:1px solid var(--linea)}
.pastoreo.sangre .pastoreo-pie{max-width:var(--ancho); margin:14px auto 0; padding-inline:24px}
.pastoreo-marco{position:relative; overflow:hidden; border-radius:6px;
  box-shadow:0 1px 2px rgba(82,77,73,.10), 0 18px 44px rgba(82,77,73,.13);
  cursor:crosshair; touch-action:manipulation}
.pastoreo canvas{display:block; width:100%; height:auto}
/* mando para añadir o quitar reses, dentro del propio prado */
.mando{position:absolute; top:16px; left:16px; z-index:2; display:flex; align-items:center;
  gap:4px; background:rgba(30,28,24,.74); backdrop-filter:blur(8px); border-radius:100px;
  padding:5px 6px; color:#fff; user-select:none}
.mando button{width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font:700 1.1rem/1 var(--texto);
  display:grid; place-items:center; transition:background .15s}
.mando button:hover:not(:disabled){background:var(--lima); color:var(--tinta-fuerte)}
.mando button:disabled{opacity:.32; cursor:not-allowed}
.mando .cuenta{min-width:78px; text-align:center; font-size:.78rem; font-weight:600;
  letter-spacing:.02em; padding:0 4px}
.mando .cuenta b{font-size:.95rem; font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .mando{top:12px; left:12px; padding:4px 5px}
  .mando button{width:27px; height:27px; font-size:1rem}
  .mando .cuenta{min-width:64px; font-size:.72rem}
}

.pastoreo-pista{position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(30,28,24,.72); color:#fff; font-size:.78rem; font-weight:600;
  letter-spacing:.02em; padding:8px 16px; border-radius:100px; pointer-events:none;
  backdrop-filter:blur(6px); white-space:nowrap;
  transition:opacity .5s ease; opacity:1}
.pastoreo-pista.ida{opacity:0}
.pastoreo-pie{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:14px}
.pastoreo-estado{font-size:.92rem; font-weight:600; color:var(--tinta-fuerte); margin:0}
.pastoreo-estado b{color:var(--lima-oscuro)}
.leyenda{display:flex; gap:18px; flex-wrap:wrap; font-size:.8rem; color:var(--tinta-suave)}
.leyenda span{display:inline-flex; align-items:center; gap:7px}
.leyenda i{width:13px; height:13px; display:block; border-radius:3px;
  border:1px solid rgba(0,0,0,.07)}
.l-comido{background:#C9B898}
.l-medio{background:#A8B368}
.l-alto{background:#7E9331}
.l-calva{background:#A69D8E}
.l-mata{background:#34481E}
@media(max-width:560px){
  .pastoreo-pie{flex-direction:column; align-items:flex-start; gap:10px}
  .pastoreo-pista{font-size:.72rem; padding:7px 13px}
}

/* ---------- Fichas de dato ---------- */
.datos{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; padding:0; list-style:none}
.datos li{font-size:.76rem; font-weight:600; letter-spacing:.02em; padding:6px 12px;
  background:var(--hueso); border:1px solid var(--linea); color:var(--tinta)}
.datos li b{font-weight:700; color:var(--tinta-fuerte)}

/* ---------- Cabecera de ficha ---------- */
.ficha-hero{position:relative; background:var(--tinta); min-height:min(58vh,480px);
  display:flex; align-items:flex-end; overflow:hidden}
.ficha-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.48}
.ficha-hero .contenedor{position:relative; z-index:2; padding-top:64px; padding-bottom:40px; color:#fff}
.ficha-hero h1{font-weight:700; letter-spacing:-.02em; margin:16px 0 0; max-width:21ch;
  font-size:clamp(1.7rem,4vw,2.8rem); line-height:1.12}
.ficha-hero .sitio{color:rgba(255,255,255,.85); margin:12px 0 0; font-size:1rem}
.ficha-hero .datos li{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); color:#fff}
.ficha-hero .datos li b{color:#fff}
/* Ficha sin fotografía propia: aleJAB aún no ha mandado imágenes de esa finca.
   Se sustituye la foto por un fondo con textura para que no parezca un fallo. */
.ficha-hero.sin-foto{min-height:min(42vh,340px);
  background:linear-gradient(150deg,var(--tinta) 0%,var(--tinta-fuerte) 58%,#2A2724 100%)}
.ficha-hero.sin-foto::after{content:''; position:absolute; inset:0; opacity:.16;
  background:repeating-linear-gradient(122deg,transparent 0 22px,rgba(255,255,255,.5) 22px 23px)}
.migas{font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0}
.migas a{color:rgba(255,255,255,.9)}

/* ---------- Cuerpo de ficha ---------- */
.ficha-cuerpo{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:56px;
  align-items:start; padding:60px 0 90px}
@media(max-width:940px){.ficha-cuerpo{grid-template-columns:1fr; gap:34px; padding:42px 0 88px}}

.bloque{margin-bottom:46px}
.bloque h2{font-size:1.38rem; font-weight:700; margin:0 0 16px; color:var(--tinta-fuerte)}
.bloque h3{font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lima-oscuro); margin:26px 0 12px}
.bloque p{margin:0 0 15px}
.lista{list-style:none; padding:0; margin:0}
.lista li{position:relative; padding-left:26px; margin-bottom:11px}
.lista li::before{content:''; position:absolute; left:0; top:.78em; width:12px; height:2px;
  background:var(--lima)}
.lista-marco{background:var(--hueso); border:1px solid var(--linea); padding:26px 28px}

.destacado{border-left:4px solid var(--lima); padding:2px 0 2px 22px;
  font-size:1.14rem; line-height:1.6; color:var(--tinta-fuerte); font-weight:500}

/* ---------- Panel lateral ---------- */
.panel{background:#fff; border:1px solid var(--linea); padding:26px; box-shadow:var(--sombra);
  position:sticky; top:82px}
.panel .gratis{display:inline-block; background:var(--lima); color:var(--tinta-fuerte);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px}
.panel h2{font-size:1.16rem; font-weight:700; margin:14px 0 0; color:var(--tinta-fuerte)}
.panel dl{margin:18px 0 0}
.panel dt{font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:16px}
.panel dd{margin:4px 0 0; font-weight:600; color:var(--tinta-fuerte); font-size:.95rem}
.panel dd small{display:block; font-weight:400; color:var(--tinta-suave); font-size:.83rem; line-height:1.5}
.panel .btn{width:100%; margin-top:24px}
.panel .letra{font-size:.77rem; color:var(--tinta-suave); margin:14px 0 0; line-height:1.55}

/* ---------- Galería ---------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
/* `height:auto` NO ES DECORATIVO: sin él, el atributo `height` que las fichas
   escriben en cada <img> —y que está para reservar el hueco y no dar saltos al
   cargar— GANA a `aspect-ratio`, y las fotos se pintan a su altura real. Con
   fotos parecidas no se nota; el 8-sep-2026 Mundos Nuevos entró con una
   panorámica de 800x408 al lado de dos de 800x534 y la galería salió con un
   agujero blanco. Afectaba a las nueve galerías, no solo a esa. */
.galeria img{aspect-ratio:4/3; object-fit:cover; width:100%; height:auto}
.galeria .ancha{grid-column:span 2}
@media(max-width:640px){.galeria .ancha{grid-column:span 1}}

/* ---------- Anfitrión ---------- */
.anfitrion{display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  background:var(--tinta-fuerte); color:#fff; padding:26px 28px}
.anfitrion .ini{width:56px; height:56px; flex:none; background:var(--lima);
  display:grid; place-items:center; font-size:1.25rem; font-weight:700; color:var(--tinta-fuerte)}
.anfitrion .qui{font-size:.66rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--lima)}
.anfitrion strong{display:block; font-size:1.2rem; font-weight:700; margin:2px 0}
.anfitrion a{color:#fff; font-size:.9rem}

/* ---------- Botón flotante ---------- */
.flotante{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff;
  border-top:2px solid var(--lima); padding:12px 24px; display:none;
  align-items:center; gap:16px; justify-content:space-between;
  box-shadow:0 -6px 26px rgba(82,77,73,.13)}
.flotante.visible{display:flex}
.flotante .qué{font-size:.84rem; line-height:1.35; color:var(--tinta-suave)}
.flotante .qué b{display:block; font-size:.98rem; font-weight:700; color:var(--tinta-fuerte)}
@media(max-width:560px){.flotante .qué{display:none} .flotante .btn{width:100%}}

/* ---------- Marca de dato de ejemplo (solo en la demo) ---------- */
.ejemplo{display:inline-flex; align-items:center; gap:6px; font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--teja-oscuro);
  background:#FDEEE8; border:1px solid #F6CDBC; padding:4px 10px}

/* ---------- Pie ---------- */
.pie{background:var(--tinta); color:rgba(255,255,255,.76); padding:54px 0 32px; font-size:.92rem}
.pie a{color:#fff}
.pie-rej{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
@media(max-width:760px){.pie-rej{grid-template-columns:1fr; gap:26px}}
.pie h4{color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 12px}
.pie ul{list-style:none; padding:0; margin:0}
.pie li{margin-bottom:8px}
.coletilla{margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15);
  font-size:.79rem; line-height:1.65; color:rgba(255,255,255,.6)}

/* ---------- Formulario ---------- */
.form-marco{max-width:600px; margin:0 auto; background:#fff; border:1px solid var(--linea);
  padding:38px; box-shadow:var(--sombra)}
.campo{margin-bottom:20px}
.campo label{display:block; font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta); margin-bottom:8px}
.campo input, .campo select{width:100%; padding:13px 14px; font:400 1rem var(--texto);
  border:1px solid #D6CFC7; background:#fff; color:var(--tinta); border-radius:2px}
.campo input:focus, .campo select:focus{outline:2px solid var(--lima); outline-offset:0;
  border-color:var(--lima)}
.campo .ayuda{font-size:.82rem; color:var(--tinta-suave); margin-top:7px}
.casilla{display:flex; gap:11px; align-items:flex-start; font-size:.88rem; line-height:1.55;
  font-weight:400; letter-spacing:0; text-transform:none}
.casilla input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--lima-oscuro)}

/* ---------- Filtros del catálogo (17 actividades) ---------- */
.filtros{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 30px}
.filtro-grupo{display:flex; border:1px solid var(--linea); background:#fff}
.filtro{appearance:none; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:.86rem; font-weight:600; color:var(--tinta-suave); padding:10px 17px;
  border-right:1px solid var(--linea); transition:background .18s, color .18s}
.filtro:last-child{border-right:0}
.filtro:hover{background:var(--hueso); color:var(--tinta-fuerte)}
.filtro.activo{background:var(--tinta); color:#fff}
.filtros select{font:inherit; font-size:.86rem; font-weight:600; color:var(--tinta-fuerte);
  padding:10px 14px; border:1px solid var(--linea); background:#fff; cursor:pointer}
.filtro-cuenta{font-size:.82rem; color:var(--tinta-suave)}
.sin-resultados{margin-top:26px; color:var(--tinta-suave)}
.sin-resultados button{appearance:none; border:0; background:none; font:inherit;
  color:var(--lima-oscuro); font-weight:600; text-decoration:underline; cursor:pointer; padding:0}
@media(max-width:560px){
  .filtros{gap:9px}
  .filtro{padding:9px 12px; font-size:.8rem}
}
/* Área de pulsación cómoda en pantalla táctil: 44 px es el mínimo recomendado
   y los filtros se quedaban en 34. */
@media(pointer:coarse){
  .filtro{min-height:44px}
  .filtros select{min-height:44px}
}

/* Tarjeta de una finca de la que aleJAB todavía no ha mandado fotografías */
.tarjeta-foto .sin-imagen{width:100%; height:100%; min-height:190px;
  background:linear-gradient(150deg,var(--tinta) 0%,var(--tinta-fuerte) 60%,#2A2724 100%)}
.tarjeta-foto .sin-imagen::after{content:''; position:absolute; inset:0; opacity:.14;
  background:repeating-linear-gradient(122deg,transparent 0 20px,rgba(255,255,255,.55) 20px 21px)}


/* ---------- Foco visible ----------
   Quien navega con teclado no veía dónde estaba: no había ningún estilo de foco
   salvo en los campos de formulario. */
:where(a, button, select, summary, [tabindex]):focus-visible{
  outline:3px solid var(--lima-oscuro); outline-offset:3px; border-radius:2px}
.tarjeta:focus-visible{outline:3px solid var(--lima-oscuro); outline-offset:4px}
.btn:focus-visible{outline:3px solid var(--tinta-fuerte); outline-offset:3px}

/* Requisitos de la convocatoria, bajo la descripción de los cursos (27-08-2026).
   Se pintan como aviso y no como texto corrido: quien llega de un anuncio decide
   en esa zona, y enterarse de que no puede participar DESPUÉS de dar el DNI es
   la peor forma posible de descubrirlo. */
.seccion-cab .requisitos{
  margin-top:14px; padding:12px 16px; border-left:3px solid var(--lima);
  background:rgba(181,192,52,.10); font-size:.92rem; color:var(--tinta)}