/**
 * Jarrucheo · CSS de los componentes de la home.
 *
 * Sale tal cual del prototipo validado por comparacion con el PDF.
 * Las medidas NO se tocan a ojo: estan medidas sobre el diseno a 1366 px.
 */

/* --- Cabeceras de sección: el patrón de dos capas del informe ----------- */
.j-antetitulo{margin:0 0 16px;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--j-crema)}
.j-titular{margin:0 0 26px;font-family:"Xanh Mono",serif;font-weight:400;
  font-size:52px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--j-lima)}
.j-seccion{padding-block:84px 112px}
/* flow-root, y no es cosmético: sin esto el margen inferior del titular se
   escapa de la sección (colapso de márgenes, porque abajo no hay relleno ni
   borde) y empuja a la siguiente. En «Échame una mano» eso dejaba una banda
   burdeos de 50px entre dos secciones crema. Es la misma familia de fallo
   que las líneas blancas de la portada. */
.j-seccion,
.j-contacto-seccion,
.j-tienda__portada,
.j-tienda__cuerpo{display:flow-root}
.j-centrada{text-align:center}
.j-centrada .j-titular{margin-bottom:50px;max-width:15ch;margin-inline:auto}

/* --- Portada ------------------------------------------------------------ */
.j-hero{position:relative;height:719px;display:grid;place-items:end center;overflow:clip;text-align:center}
.j-hero picture{position:absolute;inset:0}
.j-hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.j-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,18,26,.5),rgba(36,18,26,.12) 42%,rgba(36,18,26,.45))}
.j-hero__contenido{position:relative;z-index:2;padding-block-end:43px}
.j-hero__antetitulo{margin:0 0 20px;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.j-hero__titular{margin:0 0 34px;font-family:"Xanh Mono",serif;font-weight:400;
  font-size:60px;line-height:1.19;letter-spacing:.02em;text-transform:uppercase;color:var(--j-lima)}
.j-hero__entradilla{display:none;margin:0 0 26px;font-size:17px;line-height:1.5}
.j-hero .j-btn{min-width:285px;font-size:18px}

/* --- Puertas de entrada ------------------------------------------------- */
.j-atino{display:grid;grid-template-columns:repeat(5,1fr);gap:54px;margin:0;padding:0;list-style:none}
.j-atino__tarjeta{display:flex;flex-direction:column;align-items:center;gap:14px;
  min-height:195px;padding:22px 14px 20px;border:1px solid var(--j-lima);color:var(--j-lima);
  text-align:center;block-size:100%;transition:background-color .18s,color .18s,box-shadow .18s,transform .18s}
.j-atino__tarjeta svg{width:56px;height:56px;fill:currentColor}
.j-atino__tarjeta span{font-size:18px;line-height:1.28}
.j-atino__tarjeta:hover,.j-atino__tarjeta.j-destacada{background:var(--j-lima);color:var(--j-burdeos);box-shadow:var(--j-relieve)}
.j-atino__pie{margin-top:44px;display:flex;justify-content:center}

/* --- Bloque con carrusel a la derecha ----------------------------------- */
.j-doscol{display:grid;grid-template-columns:420px minmax(0,1fr);gap:36px;align-items:start}
.j-doscol > *{min-width:0}
.j-doscol__texto{margin:0 0 32px;font-size:21px;line-height:1.5;max-width:19ch}
.j-pestanas{display:flex;gap:18px;margin-bottom:26px}
.j-pestana{flex:1;min-height:40px;display:grid;place-items:center;border:1px solid var(--j-lima);
  background:transparent;color:var(--j-lima);font-family:var(--j-fuente-texto);
  font-size:22px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;padding:6px 10px;transition:background-color .15s ease,color .15s ease}
.j-pestana:hover{background:color-mix(in srgb, var(--j-lima) 18%, transparent)}
.j-pestana[aria-selected="true"]{background:var(--j-lima);color:var(--j-burdeos)}
.j-pestana:focus-visible{outline:2px solid var(--j-lima);outline-offset:3px}

/* El panel oculto lleva el atributo `hidden`, pero `display:grid` le gana:
   sin esta línea las tres pestañas se pintaban una debajo de otra. */
.j-carrusel[hidden]{display:none}
.j-carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:328px;gap:30px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.j-carrusel::-webkit-scrollbar{display:none}
.j-carrusel--4{grid-auto-columns:328px;gap:30px}
.j-producto{scroll-snap-align:start}
.j-producto__foto{width:100%;aspect-ratio:328/367;object-fit:cover}
.j-producto__pie{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-top:14px}
.j-producto__nombre{margin:0;font-size:20px;font-weight:400;line-height:1.3;max-width:15ch}
.j-producto__precio{margin:16px 0 0;font-size:20px}
.j-producto__anadir svg{width:26px;height:26px;stroke:var(--j-lima);fill:none}

/* --- Cajas regalo: imagen + texto --------------------------------------- */
.j-imgtexto{display:grid;grid-template-columns:624px minmax(0,1fr);gap:56px;align-items:center}
.j-imgtexto > *{min-width:0}
.j-imgtexto img{width:100%;height:auto}
.j-imgtexto p{margin:0 0 20px;font-size:19px;line-height:1.5}
.j-imgtexto__acciones{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:8px}

/* --- Separador con sello ------------------------------------------------ */
.j-separador{position:relative;margin-block:30px;display:grid;place-items:center}
.j-separador::before{content:"";position:absolute;inset-inline:0;inset-block-start:50%;height:1px;background:var(--j-lima)}
.j-separador__sello{position:relative;width:56px;height:78px;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--j-lima);background:var(--j-lima);color:var(--j-burdeos);
  font-family:"Xanh Mono",serif;font-size:22px;font-style:italic}

/* --- Reseñas ------------------------------------------------------------ */
.j-resenas__cab{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:end;margin-bottom:34px}
.j-resenas__cab p{margin:0;font-size:19px;line-height:1.5;text-align:right}
.j-resenas__videos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.j-resenas__videos img{width:100%;aspect-ratio:315/417;object-fit:cover}
.j-resenas__nota{margin:56px auto 40px;max-width:52ch;text-align:center;font-size:19px;line-height:1.5}
.j-testimonio{max-width:800px;margin-inline:auto;background:var(--j-crema);color:var(--j-burdeos);
  padding:36px 60px 44px;text-align:center}
.j-testimonio img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:1px solid var(--j-oliva)}
/* Los temas suelen poner <figcaption> en cursiva. Aquí no toca: el
   testimonio va en redonda, como en el diseño. */
.j-testimonio figcaption,
.j-testimonio p,
.j-testimonio h3{font-style:normal}
.j-testimonio h3{margin:0 0 16px;font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.j-testimonio p{margin:0;font-size:21px;line-height:1.45}
.j-puntos{display:flex;gap:12px;justify-content:center;margin-top:26px}
.j-punto{width:13px;height:13px;border-radius:50%;border:1px solid var(--j-lima)}
.j-punto.j-activo{background:var(--j-lima)}

/* --- Marquesina --------------------------------------------------------- */
.j-marquesina{overflow:clip;background:var(--j-lima);color:var(--j-burdeos);padding-block:11px;
  border-block:1px solid var(--j-burdeos)}
.j-marquesina__pista{display:flex;width:max-content;animation:desliza 34s linear infinite}
.j-marquesina__grupo{display:flex;align-items:center;gap:60px;margin:0;padding:0 30px;list-style:none;
  font-family:"Xanh Mono",serif;font-size:15px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.j-marquesina__grupo .j-peq{font-family:"Manrope",sans-serif;font-size:11.5px;line-height:1.25;letter-spacing:.02em;text-align:left}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Familia ------------------------------------------------------------ */
.j-familia{display:grid;grid-template-columns:minmax(0,1fr) 591px;gap:60px;align-items:center}
.j-familia p{margin:0 0 22px;font-size:19px;line-height:1.55;max-width:34ch}
.j-familia img{width:100%;height:auto}

/* --- Newsletter --------------------------------------------------------- */
.j-news{display:grid;grid-template-columns:476px minmax(0,1fr);border:1px solid var(--j-lima)}
.j-news > *{min-width:0}
.j-news img{width:100%;height:100%;object-fit:cover}
.j-news__texto{padding:64px 60px}
.j-news__texto p{margin:0 0 26px;font-size:19px;line-height:1.5;max-width:30ch}

/* --- FAQ ---------------------------------------------------------------- */
.j-faq{margin-top:6px}
.j-faq__item{border-top:1px solid var(--j-lima)}
.j-faq__item:last-child{border-bottom:1px solid var(--j-lima)}
/* Reset del <button>: sin esto el tema le pinta fondo blanco y las filas
   del acordeón salían como barras claras en vez de transparentes. */
.j-faq__boton{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:transparent;border:0;color:var(--j-crema);cursor:pointer;box-shadow:none;
  border-radius:0;min-height:0;
  padding:26px 4px;font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left}
.j-faq__mas{font-size:28px;line-height:1;font-weight:400}

/* --- Garantías + sello -------------------------------------------------- */
/* Medido sobre el diseño: tres cajas de 310 con calle de 38, es decir 1006
   de ancho total. Antes estaban a 800 y se veían pequeñas. */
.j-garantias{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;max-width:1006px;margin:0 auto;
  padding:0;list-style:none}
/* 310 × 297, medido sobre el diseño. La caja es bastante más alta de lo que
   parece: el icono va grande y con aire por los cuatro lados. */
.j-garantia{border:1px solid var(--j-lima);padding:40px 24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;min-height:297px;
  text-align:center;color:var(--j-lima)}
.j-garantia svg{width:62px;height:62px;fill:none;stroke:currentColor;stroke-width:1.5}
.j-garantia span{font-size:18px;line-height:1.35;text-transform:uppercase;letter-spacing:.02em}
.j-jaen{display:grid;place-items:center;gap:22px;padding-block:70px 0}
.j-jaen img{width:80px;height:auto}
.j-jaen h2{margin:0;font-family:"Xanh Mono",serif;font-weight:400;font-size:clamp(30px,4.5vw,61px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--j-crema)}

/* ==========================================================================
   Móvil — medido sobre el PDF de 375 px
   ========================================================================== */
@media (max-width:900px){
  :root{--gutter:24px}
  .j-cabecera__inner{gap:8px;justify-content:space-between}
  .j-cabecera__logo{width:150px;order:2;margin-inline:auto}
  .j-nav{display:none}
  .j-menu-movil{display:flex!important;align-items:center;gap:10px;order:1;flex:none;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .j-acciones{order:3;gap:14px}
  .j-acciones svg{width:20px;height:20px}
  .j-hero{height:640px}
  .j-hero__titular{font-size:38px}
  .j-hero__antetitulo{display:none}
  .j-hero__entradilla{display:block}
  .j-hero .j-btn{min-width:230px}
  .j-seccion{padding-block:52px 64px}
  .j-titular{font-size:34px}
  .j-centrada .j-titular{margin-bottom:34px}
  .j-antetitulo{font-size:15px}
  /* 2x2 + 1: las cinco puertas visibles a la vez, como pedía el informe */
  .j-atino{grid-template-columns:repeat(2,1fr);gap:16px}
  .j-atino > li:last-child:nth-child(odd){grid-column:1 / -1}
  .j-atino__tarjeta{min-height:0;padding:18px 12px}
  .j-atino__tarjeta span{font-size:16px}
  .j-doscol,.j-imgtexto,.j-familia,.j-news{grid-template-columns:1fr;gap:28px}
  .j-doscol__texto,.j-familia p{max-width:none;font-size:18px}
  .j-carrusel,.j-carrusel--4{grid-auto-columns:minmax(0,calc(50% - 8px));gap:16px}
  .j-producto__nombre,.j-producto__precio{font-size:16px}
  .j-pestana{font-size:16px}
  .j-resenas__cab{grid-template-columns:1fr;gap:16px}
  .j-resenas__cab p{text-align:left}
  .j-resenas__videos{grid-template-columns:repeat(2,1fr);gap:14px}
  .j-testimonio{padding:28px 24px 34px}
  .j-testimonio p{font-size:18px}
  .j-news__texto{padding:32px 26px}
  .j-garantias{grid-template-columns:1fr;max-width:none;gap:16px}
  .j-garantia{min-height:0;padding:26px 20px;gap:18px}
  .j-pie__cols{grid-template-columns:1fr;gap:32px;text-align:center}
  .j-pie__der{text-align:center}
  .j-jaen h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .j-marquesina__pista{animation:none;width:100%;justify-content:center}
  .j-marquesina__grupo[aria-hidden="true"]{display:none}
  *{transition:none!important}
}

/* -------------------------------------------------------------------------
 * Sangrado completo.
 *
 * Estas secciones están diseñadas a ancho de pantalla, pero casi cualquier
 * tema mete el contenido dentro de un contenedor estrecho. En lugar de
 * exigir una plantilla de página concreta —que ataría el componente al tema
 * de turno— se rompe el contenedor desde el propio componente.
 *
 * La cuenta: 50% del contenedor menos 50% del viewport da exactamente el
 * margen negativo que hace falta, sea cual sea el ancho del contenedor.
 * ---------------------------------------------------------------------- */
.j-hero,
.j-seccion,
.j-marquesina{
	width:100vw;
	max-width:100vw;
	margin-inline:calc(50% - 50vw);
}
/* El separador no sangra: va dentro de la caja de contenido, como el resto
   de secciones lo hacen por dentro con .j-contenedor. */
.j-separador{width:min(100% - 48px, 1246px);margin-inline:auto}

/* =========================================================================
 * CABECERA Y PIE GLOBALES
 * Medidos sobre el diseño a 1366 px: barra 51, cabecera 110.
 * ====================================================================== */
.j-cabecera-global{position:relative;z-index:20;background:var(--j-burdeos)}
/* En la home la cabecera flota sobre la foto de portada; en el resto de
   páginas va sólida. Es la única diferencia entre los dos modos. */
.j-cabecera-global.es-flotante{position:absolute;inset-inline:0;inset-block-start:0;background:transparent}
.j-cabecera-global.es-flotante .j-cabecera{background:transparent}

.j-barra{margin:0;height:51px;display:grid;place-items:center;background:var(--j-lima);
  color:var(--j-burdeos);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.j-cabecera{height:110px;background:var(--j-burdeos)}
.j-cabecera__inner{height:100%;display:flex;align-items:center;gap:52px}
.j-cabecera__logo{width:275px;flex:none;display:block}
.j-cabecera__logo svg{width:100%;height:auto;color:var(--j-lima);fill:currentColor}
.j-menu-movil{display:none;background:none;border:0;padding:0;cursor:pointer}
.j-nav{display:flex;gap:38px;flex:1}
.j-nav a,.j-nav__lista a{font-size:13.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--j-crema);padding-block:6px;text-decoration:none;
  white-space:nowrap}
.j-nav a:hover,.j-nav a[aria-current="page"]{color:var(--j-lima);text-decoration:underline;text-underline-offset:5px}
.j-nav__lista{display:flex;gap:38px;margin:0;padding:0;list-style:none}
.j-cabecera__acciones{display:flex;gap:22px;align-items:center;flex:none;position:relative}
/* Reset del <button> del buscador: hay plugins en el sitio que estilizan
   todos los botones y le pintaban un recuadro. */
.j-accion{position:relative;display:grid;place-items:center;color:var(--j-lima);
  background:none;border:0;padding:0;margin:0;cursor:pointer;box-shadow:none;
  min-width:0;min-height:0;line-height:0}
.j-accion:hover,.j-accion:focus{background:none;box-shadow:none;color:var(--j-crema)}
.j-accion svg{width:23px;height:23px;fill:none;stroke:currentColor}
.j-accion__contador{position:absolute;inset-block-start:-6px;inset-inline-end:-8px;min-width:17px;
  height:17px;display:grid;place-items:center;border-radius:50%;background:var(--j-lima);
  color:var(--j-burdeos);font-size:11px;font-weight:700;padding-inline:4px}

/* -------------------------------------------------------------------------
 * Pie.
 *
 * El cuerpo del pie es de 24px. No es una errata: se midió el ancho en
 * píxeles de seis cadenas distintas del PDF y se resolvió contra las
 * métricas de Manrope; las seis dieron 24. En el PDF aparenta mucho menos.
 * ---------------------------------------------------------------------- */
.j-pie{padding-block:92px 70px;background:var(--j-burdeos)}
.j-pie .j-contenedor{width:min(100% - 48px, 1152px)}
.j-pie__cols{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:start}
.j-pie h2{margin:0 0 34px;font-family:var(--j-fuente-texto);font-size:24px;font-weight:700;
  line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--j-lima)}
.j-pie ul{margin:0;padding:0;list-style:none;line-height:1.48;font-size:24px}
.j-pie a{text-decoration:none}
.j-pie a:hover{text-decoration:underline;text-underline-offset:4px}
.j-pie__der{text-align:right}
.j-pie__der h2{max-width:11ch;margin-inline-start:auto}
.j-pie__logo{display:block;width:249px;margin-inline:auto}
.j-pie__redes{display:flex;gap:29px;justify-content:center;margin:107px 0 36px}
.j-pie__redes svg{width:44px;height:44px;color:var(--j-lima);fill:none;stroke:currentColor}
.j-pie__legal{text-align:center;font-size:17px;line-height:1.45}
.j-pie__legal strong{display:block;font-weight:400;font-size:24px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:23px}

/* =========================================================================
 * PÁGINAS DE CONTENIDO
 * ====================================================================== */
/* Las páginas de contenido usan una caja de 1202, no la de 1246 de la
   home. Está medido sobre el PDF: la foto de aceitunas va de 82 a 1284. */
.j-seccion--titular .j-contenedor,
.j-seccion--imagen .j-contenedor,
.j-seccion--texto .j-contenedor,
.j-seccion--cita .j-contenedor,
.j-seccion--galeria .j-contenedor{width:min(100% - 48px, 1202px)}

.j-seccion--titular{padding-block:22px 0}
 /* 59px medido sobre el diseño, por dos caminos que coinciden: la altura de
   mayúscula del PDF es 46px y la de Xanh Mono es 0,778 em (46/0,778 = 59);
   y el avance por carácter es de 29,7px, que a 0,504 em da los mismos 59.
   El interlineado sale de la distancia entre las dos líneas: 65px = 1,1.
   No tocar a ojo: en el PDF aparenta bastante menos de lo que mide. */
.j-titular--pagina,
.j-titular--seccion{margin:0;font-family:var(--j-fuente-titulos);font-weight:400;
  font-size:clamp(32px,4.32vw,59px);line-height:1.1;letter-spacing:normal;
  text-transform:uppercase;color:var(--j-titulo)}
.j-titular--pagina{max-width:20ch}
/* 16ch: en el diseño los titulares de sección rompen antes de lo que
   pediría la columna —«EL COMPROMISO / QUE HEREDAMOS», no «EL COMPROMISO
   QUE / HEREDAMOS»—. Con Xanh Mono, que es monoespaciada, un tope en ch
   reproduce esos cortes exactos sin meter <br> en el contenido. */
.j-titular--seccion{margin-block-end:22px;max-width:16ch}
/* -------------------------------------------------------------------------
 * El ritmo vertical de las páginas de contenido.
 *
 * No es un espaciado uniforme: en el diseño el hueco depende de qué hay a
 * cada lado —tras una foto se respira menos que entre dos bloques de
 * prosa—. Están medidos uno a uno sobre el PDF, de última fila con tinta a
 * primera fila con tinta, así que se expresan como pares de hermanos y no
 * como un margen suelto por componente.
 * ---------------------------------------------------------------------- */
.j-seccion--imagen{padding-block:22px 0}
.j-seccion--imagen  + .j-seccion--texto  {padding-block-start:34px}
.j-seccion--texto   + .j-seccion--cita   {padding-block-start:141px}
.j-seccion--cita    + .j-seccion--texto  {padding-block-start:138px}
.j-seccion--texto   + .j-seccion--galeria{padding-block-start:90px}
.j-seccion--galeria + .j-seccion--texto  {padding-block-start:114px}
.j-seccion--texto   + .j-seccion--imagen {padding-block-start:103px}

/* Y el aire que queda debajo de la última sección oscura antes de que
   cambie el fondo. Va aquí y no en la sección crema porque el color de ese
   hueco es el de arriba, no el de abajo. */
.base-oscura:has(+ .base-crema){padding-block-end:77px}
.j-seccion--texto{padding-block:34px 0}
.j-seccion--cita{padding-block:56px 0}
.j-seccion--galeria{padding-block:60px 0}

.j-columnas{display:grid;gap:60px;align-items:start}
 /* Las rejillas del diseño no son columnas iguales: la primera celda —la
   entradilla o el titular— tiene su propio ancho. Medido sobre el PDF:
   dos columnas 600/539 con calle de 61; tres, 300/414/414 con calle de 36. */
.j-columnas[data-cols="2"]{grid-template-columns:minmax(0,600fr) minmax(0,539fr);gap:61px}
.j-columnas[data-cols="3"]{grid-template-columns:300px minmax(0,1fr) minmax(0,1fr);gap:36px}
/* Cuerpo de las páginas de contenido: 21px con 26px de interlínea.
   No está estimado a ojo: se midió el ancho en píxeles de varias líneas del
   PDF y se resolvió el tamaño contra las métricas reales de Manrope
   (suma de avances de cada carácter). Los cuatro elementos de esta página
   dieron el mismo resultado por separado, así que el dato es firme —y
   coincide con los 21px de «cuerpo destacado» del informe. */
.j-columnas p,
.j-cita p,
.j-galeria p{margin:0 0 25px;font-size:21px;line-height:1.24}
.j-columnas p:last-child,
.j-cita p:last-child,
.j-galeria p:last-child{margin-bottom:0}
.j-columnas p.j-entradilla,
.j-entradilla{margin:0;font-family:var(--j-fuente-texto);font-size:34px;line-height:1.06;
  color:var(--j-titulo);max-width:none}

/* La cita y la galería no llenan la caja: en el diseño acaban unos 30-40px
   antes del margen derecho, y de ahí salen los cortes de línea del titular
   y de los párrafos. Se respeta, porque si se estiran al ancho completo el
   texto reflota y deja de parecerse al PDF. */
.j-cita{display:grid;grid-template-columns:minmax(0,629px) minmax(0,485px);
  gap:60px;justify-content:start;align-items:start}
.j-cita__texto{margin:0 0 15px;font-family:var(--j-fuente-titulos);font-style:italic;
  font-size:clamp(24px,2.4vw,33px);line-height:1.09;color:var(--j-titulo);max-width:360px}
.j-cita__autor{margin:0 0 52px;font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--j-texto-suave)}
.j-cita img{width:100%;height:auto}

.j-galeria{display:grid;grid-template-columns:minmax(0,574px) minmax(0,539px);
  gap:51px;justify-content:start;align-items:start}
.j-galeria__fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.j-galeria__fotos img{width:100%;height:100%;object-fit:cover;aspect-ratio:275/482}

/* -------------------------------------------------------------------------
 * Bloque de contacto sobre foto.
 *
 * Medido sobre el PDF: el bloque lima ocupa la caja de 1246 justo debajo de
 * la cabecera, mide 569 de alto y deja 38 de foto por debajo.
 * ---------------------------------------------------------------------- */
.j-contacto-seccion{padding-block:0 38px;background-size:cover;background-position:center}
.j-contacto{background:var(--j-lima);color:var(--j-burdeos);text-align:center;
  min-height:569px;padding:76px 77px 47px;display:grid;justify-items:center;
  align-content:start;gap:0}
.j-contacto__sello{width:48px;height:82px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--j-burdeos);font-family:var(--j-fuente-titulos);font-style:italic;
  font-size:21px;margin-block-end:39px}
.j-contacto__frase{margin:0 0 43px;font-family:var(--j-fuente-titulos);font-weight:400;
  font-size:clamp(28px,3.5vw,48px);line-height:1.15;max-width:850px;color:var(--j-burdeos)}
.j-contacto__frase em{font-style:italic}
/* El bloque es claro aunque la sección sea oscura: hereda las variables de
   la base crema para que el botón salga burdeos sobre lima, como el diseño.
   Y sin relieve: en el PDF este botón es plano. */
.j-contacto .j-btn{min-width:265px;min-height:41px;padding:9px 26px;
  font-size:17px;letter-spacing:.08em;box-shadow:none}
.j-contacto .j-btn:hover{transform:none;opacity:.88}
.j-contacto__datos{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;
  margin:69px 0 0;padding:0;list-style:none;width:100%;font-size:20px}
.j-contacto__datos a{text-decoration:none}
.j-contacto__datos a:hover{text-decoration:underline;text-underline-offset:4px}

/* =========================================================================
 * DÓNDE ESTAMOS · mapa con tarjeta superpuesta
 * Medido sobre el diseño: caja útil 1180, mapa 946x554, tarjeta 415 con
 * 32px de caída y 181px de solape sobre el mapa.
 * ====================================================================== */
.j-seccion--mapa{padding-block:78px 92px}
.j-seccion--mapa .j-contenedor{width:min(100% - 48px, 1202px)}
.j-mapa__cab{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,539fr);
  gap:61px;align-items:start;margin-block-end:40px}
.j-mapa__cab p{margin:6px 0 0;font-size:20px;line-height:1.3;max-width:34ch}
.j-mapa{position:relative}
/* 946 de mapa + 21 de aire a la derecha de la tarjeta: 1202 - 946 - 21 = 235
   de solape aparente. Las tres medidas salen del PDF. */
.j-mapa__lienzo{display:block;width:calc(100% - 256px);aspect-ratio:946/554;
  border:0;overflow:hidden;background:color-mix(in srgb, var(--j-burdeos) 8%, transparent)}
.j-mapa__lienzo img{width:100%;height:100%;object-fit:cover;display:block}
.j-mapa__tarjeta{position:absolute;inset-block-start:32px;inset-inline-end:21px;
  width:415px;min-height:502px;padding:70px 57px 72px;
  background:var(--j-burdeos);color:var(--j-crema)}
.j-mapa__tarjeta h3{display:flex;align-items:center;gap:10px;margin:0 0 13px;
  font-family:var(--j-fuente-titulos);font-weight:400;font-size:30px;
  line-height:1.1;letter-spacing:normal;text-transform:uppercase;color:var(--j-lima)}
.j-mapa__tarjeta h3 + p{margin:0 0 47px;padding-inline-start:30px;font-size:21px;line-height:1.15}
.j-mapa__tarjeta p:last-child{margin-block-end:0}
.j-mapa__tarjeta svg{width:20px;height:20px;flex:none;color:var(--j-lima)}
.j-mapa__tarjeta a{text-decoration:none}
.j-mapa__tarjeta a:hover{text-decoration:underline;text-underline-offset:4px}

/* =========================================================================
 * 404
 * El número gigante es decorativo: se pinta un punto más claro que el fondo
 * para que no compita con el titular. Va detrás, no encima.
 * ====================================================================== */
.j-404{position:relative;display:grid;place-items:center;text-align:center;
  padding-block:140px 150px;overflow:clip}
/* El «404» del fondo: 560px con mucha letra suelta, medido sobre el PDF
   (ocupa 1240 de ancho y 420 de alto). El sangrado de la derecha compensa
   el espacio que la última cifra arrastra, para que quede centrado de
   verdad y no once píxeles a la izquierda. */
.j-404__marca{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);font-family:var(--j-fuente-titulos);font-weight:400;
  font-size:clamp(190px,41vw,560px);line-height:.75;letter-spacing:.34em;text-indent:.34em;
  color:color-mix(in srgb, var(--j-crema) 7%, transparent);pointer-events:none;user-select:none}
.j-404__contenido{position:relative;z-index:1;display:grid;justify-items:center;gap:0}
.j-404__titulo{margin:0 0 26px;font-size:clamp(34px,5.86vw,80px);line-height:1.1;
  letter-spacing:normal;max-width:none;color:var(--j-lima)}
.j-404__texto{margin:0 0 69px;font-size:clamp(19px,2vw,27px);line-height:1.33;max-width:620px}
.j-404 .j-btn{min-width:319px;min-height:43px}

@media (max-width:900px){
  .j-mapa__cab{grid-template-columns:1fr;gap:18px;margin-block-end:24px}
  .j-mapa__lienzo{width:100%}
  .j-mapa__tarjeta{position:static;width:100%;margin-block-start:-1px;padding:32px 26px 34px}
  .j-404{padding-block:80px 96px}
  .j-404__texto{margin-block-end:44px}
}

/* =========================================================================
 * MÓVIL
 * ====================================================================== */
@media (max-width:900px){
  .j-cabecera{height:74px}
  .j-cabecera__inner{gap:8px;justify-content:space-between}
  .j-cabecera__logo{width:150px;order:2;margin-inline:auto}
  .j-nav{display:none}
  .j-menu-movil{display:block;order:1;flex:none;color:var(--j-lima);
    font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .j-cabecera__acciones{order:3;gap:14px}
  .j-accion svg{width:20px;height:20px}
  .j-titular--pagina{max-width:none}
  .j-columnas[data-cols="2"],.j-columnas[data-cols="3"]{grid-template-columns:1fr;gap:26px}
  .j-entradilla{font-size:22px;max-width:none}
  .j-cita,.j-galeria{grid-template-columns:1fr;gap:28px}
  .j-galeria__fotos{gap:12px}
  .j-contacto{padding:32px 22px 30px;gap:20px}
  .j-contacto__datos{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .j-pie__cols{grid-template-columns:1fr;gap:32px;text-align:center}
  .j-pie__der{text-align:center}
}