/* ══ MARCA · la capa común de toda la web ════════════════════════════════════
 *
 * Versión «verde y crema, pulida»: la misma identidad de la web publicada
 * (crema, verde oscuro, el recorrido por la casa) con un acabado más cuidado.
 * Se carga la ÚLTIMA en cada página, después de sus estilos propios, y fija:
 *
 *   1. los colores, cada uno con una función;
 *   2. las letras: Lora para titulares, Manrope para todo lo demás;
 *   3. la cabecera, el pie y los tres botones, iguales en todas las páginas;
 *   4. la tarjeta de inmueble, la misma en la portada y en el catálogo;
 *   5. los espacios: ~96 px entre secciones en escritorio y 56 px en el móvil.
 *
 * Contraste medido (WCAG AA: 4,5:1 en texto normal, 3:1 en bordes de campos):
 *   carbón sobre marfil 12,4 · texto secundario 6,8 · etiquetas 5,7
 *   verde medio sobre marfil 5,2 · blanco sobre verde medio 5,9
 *   marfil sobre bosque 10,5 · arena sobre bosque 7,0 · bosque sobre arena 7,0
 *   borde de los campos sobre marfil 3,2 y sobre blanco 3,6
 * El menta del logotipo sobre el marfil da 1,6:1; por eso solo es de marca.
 */
:root{
  --marfil:#F5F1E8;        /* fondo general */
  --marfil-2:#ECE6D9;      /* franjas y huecos de foto */
  --blanco:#FFFFFF;        /* superficies: tarjetas, buscador */
  --bosque:#243C32;        /* cabecera, contacto y pie */
  --bosque-2:#2F4A3F;      /* campos sobre el bosque */
  --verde-medio:#416D59;   /* botón principal y enlaces sobre claro */
  --verde-medio-2:#355B4A; /* su estado al pasar el ratón */
  --arena:#D8C59A;         /* acentos sobre oscuro */
  --arena-2:#E6D8B6;
  --carbon:#252E29;        /* texto sobre claro */
  --carbon-2:#4C5650;      /* texto secundario */
  --etiqueta:#58615B;      /* etiquetas y datos pequeños */
  --sobre-bosque:#C8D2CA;  /* texto secundario sobre el bosque */
  --sobre-bosque-2:#AEBDB2;
  --linea:#DCD4C4;         /* separadores */
  --linea-control:#8A877C; /* bordes de campos (3:1) */
  --linea-oscura:rgba(245,241,232,.16);
  --menta:#5ED3A4;         /* SOLO el logotipo */

  --titulares:'Lora',Georgia,'Times New Roman',serif;
  --texto:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --radio:8px;             /* fotos y tarjetas */
  --radio-control:6px;     /* botones y campos */
  --alto-control:48px;
  --margen:clamp(20px,5vw,64px);
  --ancho:1240px;
  --seccion:clamp(56px,8vw,96px);
  --h2:clamp(30px,2.6vw + 14px,46px);
  --sombra:0 1px 2px rgba(37,46,41,.05),0 2px 8px rgba(37,46,41,.04);
  --sombra-alta:0 14px 30px -14px rgba(37,46,41,.26);

  /* Los nombres de siempre de cada página, apuntando a los nuevos: sus estilos
     propios heredan la paleta sin reescribirlos uno a uno. */
  --hueso:var(--marfil); --tinta:var(--carbon); --noche:#141D18;
  --primario:var(--verde-medio); --primario-texto:var(--verde-medio);
  --verde:var(--bosque); --oro-claro:var(--arena); --piedra:var(--etiqueta);
  --mint:var(--arena);     /* lo que era menta fuera del logotipo pasa a arena */
  --serif:var(--titulares); --sans:var(--texto); --lectura:var(--texto); --redonda:var(--texto);
  --borde-suave:var(--linea); --borde-control:var(--linea-control); --pildora:var(--radio-control);
}

/* ── 1 · base ───────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
body{background:var(--marfil);color:var(--carbon);font-family:var(--texto);font-size:16.5px;line-height:1.65;
    -webkit-font-smoothing:antialiased}
/* width/height en las <img> reservan su hueco al cargar; sin height:auto, el
   alto escrito pisa la proporción (aspect-ratio) y la foto sale estirada */
img{max-width:100%;height:auto}
h1,h2,h3,blockquote,.serif{font-family:var(--titulares);font-weight:500;letter-spacing:-.01em}
::selection{background:var(--arena);color:var(--carbon)}
/* La cursiva es un acento («en el pueblo»), no una costumbre: en los
   encabezados de sección, el <em> ya no cambia de letra ni de color. */
h2 em,h3 em{font-style:normal;color:inherit}
.kicker{font-family:var(--texto);font-size:12.5px;font-weight:700;letter-spacing:.08em;line-height:1.4;
    text-transform:uppercase;color:var(--verde-medio)}
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* «Saltar al contenido»: invisible hasta que llega el foco del teclado */
.saltar{position:fixed;left:12px;top:-80px;z-index:200;background:var(--bosque);color:var(--marfil);
    padding:12px 16px;border-radius:var(--radio-control);font:600 15px/1 var(--texto);text-decoration:none;
    transition:top .2s ease}
.saltar:focus{top:12px;outline:2px solid var(--arena);outline-offset:2px}
#contenido:focus{outline:none}
/* primera capa de información junto a cada formulario (art. 11 LOPDGDD) */
.info-datos{margin-top:10px;font-size:13px;line-height:1.55;color:var(--etiqueta)}
.info-datos a{color:inherit;text-decoration:underline;text-underline-offset:2px}
:is(#contacto,.tarjeta-contacto) .info-datos{color:var(--sobre-bosque-2)}
/* aviso de que un buscador o un chat lo atiende una IA */
.nota-ia{font-size:13.5px;line-height:1.5;color:var(--etiqueta)}
.nota-ia a{color:var(--verde-medio);font-weight:600}

/* foco visible con teclado; sobre fondo oscuro, en arena */
body :is(a,button,select,input,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--verde-medio);outline-offset:2px}
body :is(.cabecera,.pie,#contacto,.cierre,.tarjeta-contacto,#hero,.sin-cookies) :is(a,button,select,input,textarea,[tabindex]):focus-visible{outline-color:var(--arena)}

/* ── 2 · botones: principal relleno, secundario con borde y enlace de texto ─
   Misma letra, misma altura y mismo redondeado para los tres. */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--alto-control);
    padding:0 24px;border-radius:var(--radio-control);border:1px solid transparent;
    font:600 15px/1.2 var(--texto);letter-spacing:.01em;text-transform:none;text-decoration:none;
    white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.boton[disabled]{opacity:.55;cursor:progress}
.boton-principal,.boton-primario{background:var(--verde-medio);color:#fff}
.boton-principal:hover,.boton-primario:hover{background:var(--verde-medio-2)}
.boton-secundario{background:transparent;color:var(--carbon);border-color:var(--linea-control)}
.boton-secundario:hover{border-color:var(--carbon)}
/* sobre el bosque: el principal es arena, el secundario un borde claro */
.boton-arena,.boton-menta{background:var(--arena);color:var(--bosque);border-color:var(--arena)}
.boton-arena:hover,.boton-menta:hover{background:var(--arena-2);border-color:var(--arena-2)}
.boton-borde-claro{background:transparent;color:var(--marfil);border-color:rgba(245,241,232,.55)}
.boton-borde-claro:hover{border-color:var(--marfil)}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;color:var(--verde-medio);font-weight:600;font-size:15px;
    text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.enlace-flecha:hover{color:var(--verde-medio-2)}
.enlace-flecha .fl{display:inline-block;transition:transform .2s ease}
.enlace-flecha:hover .fl{transform:translateX(3px)}
/* Flechas dibujadas: el móvil no puede sustituirlas por emojis. */
.icono-flecha{display:inline-block;position:relative;width:18px;height:18px;flex:none;vertical-align:-3px;color:inherit}
.icono-flecha::before{content:"";position:absolute;left:1px;top:8px;width:15px;border-top:1.5px solid currentColor}
.icono-flecha::after{content:"";position:absolute;right:2px;top:5px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.icono-flecha-diagonal{transform:rotate(-45deg)}

/* ── 3 · cabecera: la misma en todas las páginas ──────────────────────────── */
.cabecera{position:sticky;top:0;z-index:60;background:var(--bosque);color:var(--marfil);
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.cabecera-fila{max-width:var(--ancho);margin:0 auto;padding:12px var(--margen);min-height:72px;
    display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.logo svg{width:30px;height:auto;flex:none}
.logo b{font:700 14.5px/1 var(--texto);letter-spacing:.1em;white-space:nowrap}
.menu{display:flex;align-items:center;gap:4px}
.menu a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--radio-control);
    color:inherit;text-decoration:none;font:500 15.5px/1 var(--texto);letter-spacing:.005em;opacity:.9;
    transition:opacity .2s,color .2s,background-color .2s,border-color .2s}
.menu a:hover{opacity:1;color:var(--arena)}
.menu a[aria-current="page"]{opacity:1;color:var(--arena)}
.menu a.menu-hablamos{margin-left:10px;padding:0 18px;border:1px solid rgba(245,241,232,.6);opacity:1}
.menu a.menu-hablamos:hover{background:var(--marfil);border-color:var(--marfil);color:var(--bosque)}
.menu-boton{display:none}

/* En la portada va encima de la película, transparente, y se posa en el
   verde al terminarla (la clase la pone la portada). */
.cabecera.flotante{position:fixed;inset:0 0 auto;background:transparent;
    transition:background-color .4s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.cabecera.flotante::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(12,18,15,.62),rgba(12,18,15,0));transition:opacity .4s ease}
.cabecera.flotante.posado{background:var(--bosque)}
.cabecera.flotante.posado::before{opacity:0}
.cabecera.flotante:not(.posado) :is(.logo,.menu a,.menu-boton){text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* Móvil: vuelve el nombre, y los enlaces pasan a un menú compacto */
@media (max-width:760px){
  .cabecera-fila{min-height:60px;padding-top:8px;padding-bottom:8px;gap:12px}
  .logo svg{width:28px}
  .logo b{font-size:13px;letter-spacing:.09em}
  .js .menu-boton{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;
      border-radius:var(--radio-control);border:1px solid rgba(245,241,232,.5);background:transparent;
      color:inherit;font:600 14.5px/1 var(--texto);cursor:pointer}
  .menu-icono{position:relative;width:16px;height:11px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
  .menu-icono::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%)}
  .menu-abierto .menu-icono{border-color:transparent}
  .menu-abierto .menu-icono::after{transform:rotate(45deg)}
  .menu-abierto .menu-icono::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:rotate(-45deg)}
  .js .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
      background:var(--bosque);padding:4px var(--margen) 20px;border-top:1px solid var(--linea-oscura);
      box-shadow:0 22px 30px -20px rgba(0,0,0,.55)}
  .js .menu-abierto .menu{display:flex}
  .js .menu a{min-height:52px;padding:0;border-radius:0;border-bottom:1px solid var(--linea-oscura);font-size:17px}
  .js .menu a.menu-hablamos{margin:16px 0 0;justify-content:center;border:1px solid rgba(245,241,232,.6);border-radius:var(--radio-control)}
  .cabecera.menu-abierto{background:var(--bosque)}
  /* sin JavaScript: los enlaces a la vista, en una segunda fila */
  html:not(.js) .cabecera-fila{flex-wrap:wrap}
  html:not(.js) .menu{width:100%;flex-wrap:wrap}
}

/* ── 4 · pie: el mismo en todas las páginas ──────────────────────────────── */
.pie{background:var(--bosque);color:var(--sobre-bosque);font-size:14.5px;line-height:1.7;
    border-top:1px solid var(--linea-oscura)}
.pie-fila{max-width:var(--ancho);margin:0 auto;padding:clamp(48px,6vw,72px) var(--margen) 36px;
    display:grid;gap:32px 40px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr)}
.pie .logo{color:var(--marfil)}
.pie-marca p{margin-top:16px;max-width:32ch}
.pie-titulo{font:700 12.5px/1.4 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--arena);margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li+li{margin-top:6px}
.pie a{color:var(--marfil);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.pie a:hover{border-color:var(--arena)}
.pie-legal{max-width:var(--ancho);margin:0 auto;padding:18px var(--margen) 30px;border-top:1px solid var(--linea-oscura);
    display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;font-size:13px;color:var(--sobre-bosque-2)}
.pie-legal p{margin:0}
.pie-legal nav{display:flex;gap:6px 20px;flex-wrap:wrap}
.pie-legal a{color:var(--sobre-bosque)}
@media (max-width:760px){ .pie-fila{grid-template-columns:1fr} }
/* en el móvil deja libre la esquina de Benji */
@media (max-width:520px){ .pie-legal{padding-bottom:88px} }

/* ── 5 · tarjeta de inmueble: la misma en la portada y en el catálogo ─────
   Foto 4:3, texto a la izquierda y el precio con más peso que el lugar.
   Arriba el título y dónde está; abajo el precio y las características,
   para que en una fila de tarjetas los precios queden a la misma altura. */
.tarjeta{display:flex;flex-direction:column;min-width:0;color:var(--carbon);text-decoration:none;
    background:var(--blanco);border:1px solid rgba(37,46,41,.07);border-radius:var(--radio);overflow:hidden;
    box-shadow:var(--sombra);transition:transform .3s ease,box-shadow .3s ease}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.tarjeta-foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--marfil-2)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.04)}
.tarjeta-sinfoto{position:absolute;inset:0;display:grid;place-items:center;font-size:13.5px;color:var(--etiqueta)}
.tarjeta-datos{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px 20px;text-align:left}
.tarjeta-titulo{font:500 20px/1.28 var(--titulares);letter-spacing:-.005em;color:var(--carbon);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-lugar{margin-top:4px;font-size:14px;line-height:1.45;color:var(--etiqueta)}
.tarjeta-pie{margin-top:auto}
.tarjeta-precio{font:700 19px/1.25 var(--texto);letter-spacing:-.01em;color:var(--carbon)}
.tarjeta-rasgos{margin-top:4px;font-size:14px;line-height:1.45;color:var(--carbon-2)}
.tarjeta-extra{font-size:13px;line-height:1.5;color:var(--carbon-2)}
@media (prefers-reduced-motion:reduce){
  .tarjeta,.tarjeta-foto img{transition:none}
  .tarjeta:hover{transform:none}
  .tarjeta:hover .tarjeta-foto img{transform:none}
}

/* ── 6 · movimiento: pequeño, suave y con intención ────────────────────────
   El recorrido por la casa sigue siendo la animación protagonista. Lo demás
   dura 0,6–1,1 s, usa la misma curva y se apaga con «reducir movimiento».
   Lo pone en marcha efectos.js (y el script de la portada para lo suyo). */
:root{--curva:cubic-bezier(.22,.61,.36,1);--curva-cortina:cubic-bezier(.65,0,.35,1)}

/* de una página a otra, un fundido corto (en los navegadores que lo tienen) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}

/* aparece al entrar en pantalla; --i escalona los de un mismo grupo */
.js .aparece{opacity:0;transform:translateY(16px);
    transition:opacity .8s var(--curva),transform .8s var(--curva);transition-delay:calc(var(--i,0) * 90ms)}
.js .aparece.vista{opacity:1;transform:none}

/* el título sube desde detrás de una línea invisible */
.js .titulo-sube{clip-path:inset(0 0 100% 0);transform:translateY(.4em);
    transition:clip-path .95s var(--curva),transform .95s var(--curva)}
.js .titulo-sube.vista{clip-path:inset(-20% -3% -30% -3%);transform:none}

/* la foto se descubre de abajo arriba, como una cortina, y se asienta */
.js .foto-descubre{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--curva-cortina)}
.js .foto-descubre img{transform:scale(1.08);transition:transform 1.7s var(--curva)}
.js .foto-descubre.vista{clip-path:inset(0 0 0 0)}
.js .foto-descubre.vista img{transform:none}

/* red de seguridad: si efectos.js no llega a cargar (no marca .efectos), lo
   escondido aparece solo a los 2,5 s; nada se queda oculto */
.js:not(.efectos) :is(.aparece,.titulo-sube,.foto-descubre,.foto-descubre img){animation:aparecer-igual 0s 2.5s forwards}
@keyframes aparecer-igual{to{opacity:1;transform:none;clip-path:none}}

/* paralaje: la foto va algo más despacio que la página (efectos.js) */
[data-paralaje] img{transform:translateY(var(--desplaza,0)) scale(1.14);will-change:transform}

/* la cabecera se aparta al bajar y vuelve al subir */
.cabecera.escondida{transform:translateY(-100%)}

/* subrayado que crece en los enlaces del menú (escritorio) */
@media (min-width:761px){
  .menu a:not(.menu-hablamos){position:relative}
  .menu a:not(.menu-hablamos)::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;
      background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--curva)}
  .menu a:not(.menu-hablamos):hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
}

/* tarjeta: «Ver ficha →» asoma junto al precio al pasar el ratón */
.tarjeta-pie{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px}
.tarjeta-pie .tarjeta-rasgos{grid-column:1/-1}
.tarjeta-ver{font-size:14px;font-weight:600;color:var(--verde-medio);white-space:nowrap;opacity:0;
    transform:translateX(-8px);transition:opacity .3s ease,transform .35s var(--curva)}
@media (hover:hover){
  .tarjeta:hover .tarjeta-ver,.tarjeta:focus-visible .tarjeta-ver{opacity:1;transform:none}
}
@media (hover:none){ .tarjeta-ver{display:none} }

/* los botones principales se hunden un pelo al pulsarlos */
.boton:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .aparece,.js .titulo-sube,.js .foto-descubre{opacity:1;transform:none;clip-path:none;transition:none}
  .js .foto-descubre img,[data-paralaje] img{transform:none;transition:none}
  .cabecera,.cabecera.flotante{transition:none}
  .cabecera.escondida{transform:none}
  .menu a::after,.tarjeta-ver{transition:none}
  .boton:active{transform:none}
}

@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('fuentes/kalam-latin.woff2') format('woff2')}
/* Una firma manuscrita: cercana, legible y sin caricaturizar la marca. */
.marca-firma{display:flex;flex-direction:column;gap:2px;align-items:flex-start;color:inherit}
.logo .marca-simbolo{display:block;width:46px;height:46px;object-fit:contain;flex:none}
.logo:has(.marca-simbolo){gap:10px}
.marca-firma .marca-nombre{font:400 32px/1.1 'Kalam',cursive;letter-spacing:-.035em;white-space:nowrap}
.marca-firma .marca-oficio{font:600 9px/1.4 var(--texto);letter-spacing:.18em;text-transform:uppercase;padding-left:2px;color:var(--verde-medio)}
@media(max-width:760px){.marca-firma .marca-nombre{font-size:27px}.marca-firma .marca-oficio{font-size:8px;letter-spacing:.14em}}
@media(max-width:760px){.logo .marca-simbolo{width:38px;height:38px}.logo:has(.marca-simbolo){gap:8px}}
@media(max-width:380px){.marca-firma .marca-nombre{font-size:23px}.marca-firma .marca-oficio{font-size:7px}.logo .marca-simbolo{width:30px;height:30px}}

/* Una misma bienvenida en toda la web. */
:root{--ancho:1320px;--radio:14px;--radio-control:8px;--curva:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:112px}
.cabecera{max-width:calc(var(--ancho) - 32px);width:calc(100% - 40px);margin:16px auto 0;top:12px;
    border-radius:14px;background:#FAF8F2;color:var(--carbon);border:1px solid rgba(36,60,50,.10);
    box-shadow:0 8px 32px -20px rgba(20,35,27,.26)}
.cabecera-fila{min-height:86px;padding:10px 26px;max-width:none}
.logo{flex:none}
.logo .logo-original{display:block;width:190px;height:auto;max-width:none;object-fit:contain}
.cabecera.flotante{inset:16px 0 auto;margin:0 auto;background:rgba(250,248,242,.98);color:var(--carbon)}
.cabecera.flotante::before{display:none}
.cabecera.flotante.posado{background:#FAF8F2}
.cabecera.flotante:not(.posado) :is(.logo,.menu a,.menu-boton){text-shadow:none}
.cabecera .menu a{font-size:14px;font-weight:600;min-height:46px;padding-inline:18px}
.cabecera .menu a:hover,.cabecera .menu a[aria-current="page"]{color:var(--verde-medio)}
.cabecera .menu a.menu-hablamos{border:0;background:var(--bosque);color:var(--marfil);padding-inline:26px;border-radius:999px}
.cabecera .menu a.menu-hablamos:hover{background:var(--verde-medio)}
.cabecera.escondida{transform:translateY(calc(-100% - 32px))}
.pie .logo{display:inline-flex;background:var(--marfil);color:var(--bosque);padding:12px 18px;border-radius:10px}
.pie .logo .logo-original{width:180px}
.pie-marca p{max-width:36ch}
.pie-fila>div{min-width:0}
.pie a[href^="mailto:"]{overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:960px){.pie-fila{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
.boton{border-radius:999px;transition:background-color .25s var(--curva),color .25s var(--curva),transform .25s var(--curva),box-shadow .25s var(--curva)}
.boton-arena{background:var(--marfil);border-color:var(--marfil);color:var(--bosque)}
.boton-arena:hover{background:var(--arena-2);border-color:var(--arena-2)}
.boton [aria-hidden="true"]{transition:transform .3s var(--curva)}
@media(hover:hover){.boton:hover [aria-hidden="true"]{transform:translateX(3px)}}
.boton:active{transform:scale(.98)}
.tarjeta{border:0;border-radius:12px;box-shadow:0 2px 12px -6px rgba(37,46,41,.12)}
.tarjeta-datos{padding:23px 24px 25px;gap:16px}
.tarjeta-titulo{font-size:23px;line-height:1.22}
.tarjeta-precio{font-size:20px}
.tarjeta-lugar{font-size:13px;letter-spacing:.01em}
.tarjeta-rasgos{padding-top:14px;margin-top:14px;border-top:1px solid var(--linea);font-size:13px}
.tarjeta-ver{opacity:1;transform:none;font-size:12px}
@media(hover:none){.tarjeta-ver{display:inline}}
body :is(.cabecera) :is(a,button):focus-visible{outline-color:var(--verde-medio)}
.cabecera .menu-icono,.cabecera .menu-icono::after,.cabecera .menu-icono::before{transition:transform .3s var(--curva),border-color .3s var(--curva)}
/* Les dejamos respirar sin esconder información mientras llega el JavaScript. */
.js .titulo-sube,.js .foto-descubre{clip-path:none}
.js .titulo-sube{transform:none}
.js .foto-descubre img{transform:none}
.js .aparece{transform:translateY(12px);transition-duration:.6s;transition-delay:calc(min(var(--i,0),4) * 60ms)}
.js .titulo-sube.vista,.js .foto-descubre.vista{clip-path:none}
@media(max-width:760px){
  html{scroll-padding-top:94px}
  .cabecera{width:calc(100% - 24px);margin-top:10px;top:10px;border-radius:12px}
  .cabecera.flotante{inset:10px 0 auto}
  .cabecera-fila{min-height:70px;padding:8px 14px;gap:10px}
  .logo .logo-original{width:150px}
  .js .cabecera .menu-boton{color:var(--carbon);border-color:var(--linea-control);padding-inline:12px;min-height:44px}
  .cabecera.menu-abierto{background:#FAF8F2}
  .js .cabecera .menu{background:#FAF8F2;border-radius:0 0 12px 12px;border-color:var(--linea);padding:6px 20px 20px}
  .js .cabecera .menu a{border-color:var(--linea);min-height:56px;font-size:17px}
  .js .cabecera .menu a.menu-hablamos{margin-top:16px;border-radius:999px}
  .js .cabecera.menu-abierto .menu a{animation:menu-entrar .3s var(--curva) both}
  .js .cabecera.menu-abierto .menu a:nth-child(2){animation-delay:.04s}
  .js .cabecera.menu-abierto .menu a:nth-child(3){animation-delay:.08s}
  .tarjeta-datos{padding:20px}.tarjeta-titulo{font-size:22px}
}
@keyframes menu-entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .cabecera.menu-abierto .menu a{animation:none}
  .boton,.boton [aria-hidden="true"],.js .aparece{transition:none}
  .boton:hover [aria-hidden="true"],.boton:active{transform:none}
  .cabecera.escondida{transform:none}
}

.intro-personas{max-width:44ch;margin-top:24px;color:var(--carbon-2);font-size:18px;line-height:1.75}
.claves .num{display:none}
.principal{border-radius:14px;overflow:hidden}
#fotoPrincipal{cursor:zoom-in}
.ampliar-fotos{position:absolute;left:16px;bottom:16px;z-index:2;min-height:44px;padding:10px 17px;border:1px solid rgba(255,255,255,.5);border-radius:30px;background:rgba(245,241,232,.96);color:#243C32;font:600 13px var(--texto);cursor:pointer;box-shadow:0 4px 14px #0002}
.ampliar-fotos span{margin-left:10px}
/* el álbum que abre «Ver N fotos» tiene sus estilos en galeria-viva.css */
@media(max-width:700px){.ampliar-fotos{left:12px;bottom:12px;padding:8px 14px}}