/* EG · Portada 2026 (eg-nivel) — pieza 2 del rediseño. Solo la pinta theme-child/portada-2026.php.
   Transcripción de opciones/eg-nivel/_trabajo/estilo.css (v5, 28-sep) con tres cambios de oficio:
   (1) clases con prefijo eg26p- y selectores con body delante (las hojas de wp_head salen después de esta);
   (2) corte en 901 px, el de la base (la maqueta cortaba en 900);
   (3) tokens de la base SIEMPRE con respaldo: si la base se apaga, la portada sigue en pie (con la letra del sistema).
   Encolada en wp_enqueue_scripts 101, dependencia emporio-garcia-main, versión filemtime. Sin signo «menor que». */

/* ---------- 0 · letra propia de las palabras gigantes: Playfair Display 400, solo las 26 mayúsculas (3.264 B en vez de
   los 38.460 B de la cara completa de la base; mismo dibujo píxel a píxel, fuentes/cmp_subconjunto.json). Sale de la
   misma Playfair v1.203 (OFL 1.1) que autoaloja la base; eg-fuentes.css no se toca. ---------- */
@font-face{font-family:'EG26P Mayus';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/portada26-playfair-mayus-v1.woff2') format('woff2');unicode-range:U+0041-005A}

/* ---------- 0 · contenedor, variables y reinicio ---------- */
body .eg26p{
  --eg26p-g:16px;
  --eg26p-c1:var(--eg-papel,#FAF8F3);
  --eg26p-c2:#F0EBDF;
  --eg26p-fc:#F2F1ED;
  --eg26p-t:var(--eg-tinta,#1A1A1A);
  --eg26p-t2:var(--eg-tinta-2,#555);
  --eg26p-b:var(--eg-linea,#E5E0D5);
  --eg26p-ws:var(--eg-ui,'Work Sans',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif);
  /* palabras gigantes: su letra propia y, detrás, el respaldo con métricas de la base (PF-resp) y Georgia. Sin 'EG Playfair':
     si va en la lista, Chromium la baja entera (38,5 KB) mientras llega la propia (medido en el banco, 29-sep 15:20). */
  --eg26p-pf:'EG26P Mayus','PF-resp',Georgia,'Times New Roman',serif;
  --eg26p-fo:var(--eg-formentera,Georgia,'Times New Roman',serif);
  display:block;background:var(--eg26p-c1);color:var(--eg26p-t);
  font:400 16px/1.6 var(--eg26p-ws);overflow-x:clip;
}
@media (min-width:901px){ body .eg26p{ --eg26p-g:48px; } }
/* main.css:8201-8205 da a toda página (body.page) un relleno de 32 16 48 px bajo 769 px: la portada de hoy lo tiene
   (su héroe empieza en y=149 con 16 px a los lados, HOY §2). La de eg-nivel va a sangre desde el borde de la cabecera. */
body.eg26p-on main.eg-main{ padding:0; }
body :where(.eg26p) :where(p,h2,h3,ul,li,picture){ margin:0; padding:0; }
body :where(.eg26p) :where(ul){ list-style:none; }
body :where(.eg26p) :where(h2,h3){ font-weight:400; letter-spacing:normal; line-height:inherit; color:inherit; }
body :where(.eg26p) :where(img){ display:block; max-width:100%; }
body :where(.eg26p) :where(a){ text-decoration:none; }
body .eg26p .eg26p-vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; }
@media (max-width:900px){ body .eg26p .eg26p-d{ display:none !important; } }
@media (min-width:901px){ body .eg26p .eg26p-m{ display:none !important; } }

/* foco: con teclado 2 px de tinta; al tocar o hacer clic, nada (s11 de Rafael) */
body .eg26p :focus-visible{ outline:2px solid #1A1A1A; outline-offset:3px; }
body .eg26p .eg26p-fila:focus-visible{ outline-offset:-2px; }
body .eg26p .eg26p-ctl button:focus-visible{ outline:2px solid #1A1A1A !important; outline-offset:2px !important; }
body .eg26p .eg26p-ctl button:focus:not(:focus-visible){ outline:none !important; }
/* enlaces que llenan todo el ancho de su caja (foto editorial y fotos de Guías): el anillo va hacia adentro; hacia afuera
   lo cortaban el overflow de la fila y el overflow-x:clip de .eg26p (5 px) */
body .eg26p .eg26p-ed:focus-visible,
body #eg26p-guias .eg-post-card-image:focus-visible{ outline-offset:-3px; }

/* ---------- 0b · banner del Cyber: banda de texto arriba de todo. Solo del lun 5-oct 00:00 al jue 8-oct 00:00 y solo si
   datos.php trae nombre y al menos un destino (piezas.php eg_portada26_b_cyber). Tinta y papel, como el resto.
   Un destino: toda la banda es el enlace (el texto va subrayado). Dos o más (eg26p-cy--v): nombre y texto sin enlace y,
   al lado (escritorio) o debajo (celular), un enlace subrayado por destino, cada uno de 44 px de alto. Todo en 400, sin
   negrita (Rafael 29-sep; la base ya pone en 400 todo enlace de la portada). ---------- */
body .eg26p .eg26p-cy{ background:var(--eg26p-t); color:var(--eg26p-c1); }
body .eg26p .eg26p-cy > a,
body .eg26p .eg26p-cy-p{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:14px; row-gap:2px; color:var(--eg26p-c1) !important; font:400 14px/1.35 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; text-align:center; }
body .eg26p .eg26p-cy > a{ min-height:48px; padding:10px var(--eg26p-g); }
body .eg26p .eg26p-cy-t{ font-weight:400; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
body .eg26p .eg26p-cy > a:hover .eg26p-cy-t{ text-decoration-thickness:2px; }
body .eg26p .eg26p-cy a:focus-visible{ outline:2px solid var(--eg26p-c1); outline-offset:-5px; }
body .eg26p .eg26p-cy--v{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:32px; padding:6px var(--eg26p-g) 0; }
body .eg26p .eg26p-cy--v .eg26p-cy-t{ text-decoration:none; }
body .eg26p .eg26p-cy-p{ padding-top:4px; }
body .eg26p .eg26p-cy-l{ display:flex; flex-wrap:wrap; justify-content:center; column-gap:16px; }
body .eg26p .eg26p-cy-l a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--eg26p-c1) !important; font:400 14px/1.35 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
body .eg26p .eg26p-cy-l a:hover{ text-decoration-thickness:2px; }
body .eg26p .eg26p-cy-l a:focus-visible{ outline-offset:-2px; }
@media (min-width:901px){
  body .eg26p .eg26p-cy > a{ min-height:52px; }
  body .eg26p .eg26p-cy--v{ min-height:52px; padding:4px var(--eg26p-g); }
  body .eg26p .eg26p-cy-p{ padding-top:0; }
}

/* ---------- 1 · letras comunes (EST:40-50) ---------- */
body .eg26p .eg26p-rot{ font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; color:var(--eg26p-t2); }
body .eg26p .eg26p-t-xl{ font:300 min(29px,7.5vw)/1.1 var(--eg26p-ws); letter-spacing:-.012em; text-wrap:balance; }
body .eg26p .eg26p-t-l{ font:300 30px/1.12 var(--eg26p-ws); letter-spacing:-.01em; }
@media (min-width:901px){
  body .eg26p .eg26p-t-xl{ font-size:44px; }
  body .eg26p .eg26p-t-l{ font-size:40px; }
}
body .eg26p .eg26p-lnk{ display:inline-flex; align-items:center; min-height:44px; font:500 14px/1.2 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; }
body .eg26p .eg26p-lnk:hover{ text-decoration-thickness:2px; }

/* subcategorías: celular en una línea; escritorio en filas con miniatura, nombre y flecha (EST:48-64, s01) */
body .eg26p .eg26p-sub{ display:flex; flex-wrap:wrap; gap:0 22px; }
body .eg26p .eg26p-sub a{ display:inline-flex; align-items:center; min-height:44px; font:400 14px/1.2 var(--eg26p-ws); letter-spacing:.05em; text-transform:uppercase; }
body .eg26p .eg26p-sub a:hover{ text-decoration:underline; text-underline-offset:6px; }
body .eg26p .eg26p-sf-i,
body .eg26p .eg26p-sf-a{ display:none; }
@media (min-width:901px){
  body .eg26p .eg26p-sub{ display:grid; gap:0; margin-top:22px; border-top:1px solid var(--eg26p-b); max-width:460px; }
  body .eg26p .eg26p-sub li{ border-bottom:1px solid var(--eg26p-b); }
  body .eg26p .eg26p-sub a{ display:grid; grid-template-columns:48px 1fr auto; align-items:center; column-gap:22px; padding:8px 4px 8px 0; font-weight:500; letter-spacing:.08em; }
  body .eg26p .eg26p-sf-i{ display:block; width:48px; aspect-ratio:3/4; background:var(--eg26p-c2); overflow:hidden; }
  body .eg26p .eg26p-sf-i img{ width:100%; height:100%; object-fit:cover; }
  body .eg26p .eg26p-sf-a{ display:block; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  body .eg26p .eg26p-sub a:hover{ text-decoration:none; }
  body .eg26p .eg26p-sub a:hover .eg26p-sf-n{ text-decoration:underline; text-underline-offset:6px; }
  body .eg26p .eg26p-sub a:hover .eg26p-sf-a{ transform:translateX(5px); }
}

/* ---------- 2 · palabra gigante (EST:66-70): el único detalle grande, decorativo ---------- */
body .eg26p .eg26p-gw{
  position:relative; z-index:2; margin:0; padding:0 var(--eg26p-g);
  /* ×.95 (30-sep, Rafael: «PRIMAVERA en móvil está un poco cortado, la última A queda muy al borde»): el cálculo llenaba
     exacto el ancho y Safari dibuja la letra algo más ancha que la tabla de avances; el 5 % deja ~9 px más por lado. */
  font:400 min(calc((100vw - 2 * var(--eg26p-g)) / var(--k) * .95), 23vw)/.8 var(--eg26p-pf);
  letter-spacing:.01em; text-transform:uppercase; color:var(--eg26p-t); white-space:nowrap;
  pointer-events:none; user-select:none; -webkit-user-select:none; font-kerning:normal;
}
@media (min-width:901px){ body .eg26p .eg26p-gw{ font-size:min(calc(var(--dw,58vw) / var(--k)), 14vw); } }

/* ---------- 3 · bloque grande: módulo del mes y LINOS / TRAJES (EST:204-240) ---------- */
body .eg26p .eg26p-mes{ padding-top:15px; }
/* anclas del cuadro «Lino» (#eg26p-linos, y #eg26p-mes en ene-feb): que la cabecera no tape el arranque del bloque */
body .eg26p #eg26p-linos,
body .eg26p #eg26p-mes{ scroll-margin-top:72px; }
body .eg26p .eg26p-bloque{ display:grid; grid-template-columns:minmax(0,1fr); }
body .eg26p .eg26p-bloque > .eg26p-gw{ text-align:center; line-height:.6; margin-bottom:-.16em; }
body .eg26p .eg26p-bloque-foto{ display:block; position:relative; aspect-ratio:var(--ar,3/4); background:var(--eg26p-c2); overflow:hidden; }
body .eg26p .eg26p-bloque-foto img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
body .eg26p .eg26p-bloque-txt{ padding:11px var(--eg26p-g) 0; display:grid; gap:0; align-content:start; }
body .eg26p .eg26p-bloque-txt > .eg26p-rot{ margin-bottom:4px; }
body .eg26p .eg26p-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:0 22px; margin-top:-6px; }
body .eg26p .eg26p-fila-b{ padding-top:24px; }
body .eg26p .eg26p-blog-l{ padding:28px var(--eg26p-g) 0; display:grid; gap:4px; max-width:720px; }
body .eg26p .eg26p-blog-l a{ display:inline-flex; align-items:center; min-height:44px; font:400 17px/1.45 var(--eg26p-ws); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
@media (min-width:901px){
  body .eg26p .eg26p-mes{ padding-top:40px; }
  body .eg26p .eg26p-bloque{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; }
  body .eg26p .eg26p-bloque > .eg26p-gw{ grid-column:1 / -1; text-align:left; --dw:58vw; }
  body .eg26p .eg26p-bloque-foto{ height:auto; min-height:clamp(560px, calc(100vh - 180px), 820px); aspect-ratio:auto; }
  body .eg26p .eg26p-bloque-foto img{ object-position:50% 0; }
  body .eg26p .eg26p-bloque-txt{ align-content:center; padding:72px clamp(48px,7vw,120px) 40px; gap:12px; }
  body .eg26p .eg26p-bloque-txt .eg26p-t-xl{ font-size:clamp(46px,4.3vw,64px); line-height:1.04; letter-spacing:-.02em; }
  body .eg26p .eg26p-bloque-txt .eg26p-acc{ margin-top:0; }
  body .eg26p .eg26p-fila-b{ padding-top:56px; }
  body .eg26p .eg26p-bloque-txt .eg26p-blog-l{ padding:24px 0 0; max-width:460px; }
  /* noviembre: la S de TRAJES termina 40 px dentro de la foto */
  body .eg26p .eg26p-bloque > .eg26p-gw.eg26p-gw--in{ font-size:min(calc((50vw - var(--eg26p-g) - 40px) / var(--k)), 14vw); }
  /* espejo del módulo: foto a la derecha; la palabra cruza su esquina de arriba */
  body .eg26p .eg26p-bloque--der > .eg26p-gw{ justify-self:start; width:calc(50% + 16vw); padding:0; text-align:right; --dw:44vw; }
  body .eg26p .eg26p-bloque--der .eg26p-bloque-foto{ grid-column:2; grid-row:2; }
  body .eg26p .eg26p-bloque--der .eg26p-bloque-txt{ grid-column:1; grid-row:2; }
}

/* ---------- 4 · cabecera de sección (EST:193-202) ---------- */
body .eg26p .eg26p-sec{ padding:80px 0 0; }
body .eg26p .eg26p-cab{ padding:0 var(--eg26p-g) 24px; display:grid; gap:8px; }
body .eg26p .eg26p-cab .eg26p-lnk{ justify-self:start; }
body .eg26p .eg26p-der{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
@media (min-width:901px){
  body .eg26p .eg26p-sec{ padding-top:144px; }
  body .eg26p .eg26p-cab{ grid-template-columns:1fr auto; align-items:end; column-gap:32px; padding-bottom:32px; }
  body .eg26p .eg26p-cab > .eg26p-rot,
  body .eg26p .eg26p-cab > h2{ grid-column:1; }
  body .eg26p .eg26p-cab > .eg26p-der{ grid-column:2; grid-row:1 / span 2; gap:24px; justify-self:end; }
}

/* ---------- 5 · filas deslizables (EST:178-190). Flechas: contrato de carousel.js (dan la vuelta) ---------- */
body .eg26p .eg26p-fila-w{ position:relative; }
body .eg26p .eg26p-fila{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 2.25); gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:0 var(--eg26p-g); scroll-padding:0 var(--eg26p-g); scrollbar-width:none; }
body .eg26p .eg26p-fila::-webkit-scrollbar{ display:none; }
body .eg26p .eg26p-fila > *{ scroll-snap-align:start; }
body .eg26p .eg26p-ctl{ display:none; }
@media (min-width:901px){
  body .eg26p .eg26p-fila{ grid-auto-columns:calc((100% - 72px) / 4); gap:24px; }
  body .eg26p .eg26p-ctl{ display:flex; gap:4px; }
  body .eg26p .eg26p-ctl button{ width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--eg26p-b) !important; background:transparent !important; color:var(--eg26p-t) !important; border-radius:0 !important; }
  body .eg26p .eg26p-ctl button:hover:not(:disabled){ border-color:var(--eg26p-t) !important; }
  body .eg26p .eg26p-ctl button:disabled{ opacity:.35; cursor:default; }
}

/* ---------- 6 · tarjeta de producto (EST:159-176): toda la tarjeta es un solo toque ---------- */
body .eg26p .eg26p-card{ position:relative; min-width:0; }
body .eg26p .eg26p-card-foto{ display:block; position:relative; aspect-ratio:3/4; background:var(--eg26p-c2); overflow:hidden; }
body .eg26p .eg26p-card-foto img{ width:100%; height:100%; max-width:none; object-fit:cover; }
body .eg26p .eg26p-card-foto .eg26p-f2{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; } /* 5-oct: .6s, el de eg-motion.php 2.2.0 (antes .5s) */
@media (hover:hover){ body .eg26p .eg26p-card:hover .eg26p-f2.eg26p-ok{ opacity:1; } }
body .eg26p .eg26p-card-foto .eg26p-f2.eg26p-pasa{ animation:eg26p-pasa 2.6s ease both; }
@keyframes eg26p-pasa{ 0%,100%{ opacity:0; } 23%,77%{ opacity:1; } } /* 5-oct: 0,6 s de fundido, 1,4 s entera (antes 30-70 %: ~1 s); el tiempo de eg-motion.php 2.2.0 */
body .eg26p .eg26p-card-dist{ margin:12px 0 0; font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; color:var(--eg26p-t2); }
/* nombres largos: los guiones blandos de datos.php 'cortes' (DESES-TRUCTURADO) solo bajo 390 px, donde la palabra no cabe entera
   en la tarjeta; más ancho, la palabra baja entera. Cualquier otra que no quepa se corta sin guion (overflow-wrap), nunca se monta
   sobre la tarjeta de al lado. */
body .eg26p .eg26p-card-nom{ margin:12px 0 0; font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.04em; text-transform:uppercase; overflow-wrap:anywhere; -webkit-hyphens:none; hyphens:none; }
@media (max-width:389px){ body .eg26p .eg26p-card-nom{ -webkit-hyphens:manual; hyphens:manual; } }
body .eg26p .eg26p-card-dist + .eg26p-card-nom{ margin-top:2px; }
body .eg26p .eg26p-card-nom a::after{ content:""; position:absolute; inset:0; z-index:1; }
body .eg26p .eg26p-card:hover .eg26p-card-nom a{ text-decoration:underline; text-underline-offset:4px; }
/* precio sin negrita (Rafael, 29-sep): 400 como el nombre; el de lista sigue tachado y en gris */
body .eg26p .eg26p-card-precio{ margin:4px 0 0; font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.03em; }
body .eg26p .eg26p-card-precio s{ font-weight:400; color:var(--eg26p-t2); margin-right:8px; }
body .eg26p .eg26p-card-tallas{ margin:2px 0 0; font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.03em; color:var(--eg26p-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 7 · las dos marcas (EST:242-259) ---------- */
body .eg26p .eg26p-marcas-g{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 var(--eg26p-g); }
body .eg26p .eg26p-marca{ position:relative; min-width:0; }
body .eg26p .eg26p-marca:only-child{ grid-column:1 / -1; }
body .eg26p .eg26p-marca-foto{ display:block; aspect-ratio:4/5; background:var(--eg26p-c2); overflow:hidden; margin-bottom:14px; }
body .eg26p .eg26p-marca-foto img{ width:100%; height:100%; max-width:none; object-fit:cover; }
body .eg26p .eg26p-marca-n{ margin-top:2px; font:300 26px/1.15 var(--eg26p-ws); letter-spacing:-.005em; }
body .eg26p .eg26p-marca-n--fo{ font:italic 400 27px/1.15 var(--eg26p-fo); letter-spacing:0; }
body .eg26p .eg26p-marca-n a::after{ content:""; position:absolute; inset:0; }
body .eg26p .eg26p-marca:hover .eg26p-marca-n a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
body .eg26p .eg26p-marca-t{ margin-top:4px; }
@media (max-width:900px){ body .eg26p .eg26p-marca-t{ letter-spacing:.02em; white-space:nowrap; } }
@media (max-width:389px){ body .eg26p .eg26p-marca-t{ letter-spacing:0; } }
@media (max-width:374px){
  body .eg26p .eg26p-marca-t{ white-space:normal; }
  body .eg26p .eg26p-marca-t .eg26p-l2{ display:block; }
}
@media (min-width:901px){
  body .eg26p .eg26p-marcas-g{ gap:24px; }
  body .eg26p .eg26p-marca-foto{ margin-bottom:18px; }
  body .eg26p .eg26p-marca-n{ font-size:34px; }
  body .eg26p .eg26p-marca-n--fo{ font-size:36px; }
}

/* ---------- 8 · foto editorial a todo el ancho (EST:261-264) ---------- */
body .eg26p .eg26p-ed{ display:block; margin-top:80px; aspect-ratio:4/5; background:var(--eg26p-c2); overflow:hidden; }
body .eg26p .eg26p-ed img{ width:100%; height:100%; max-width:none; object-fit:cover; }
@media (min-width:901px){ body .eg26p .eg26p-ed{ margin-top:144px; aspect-ratio:16/9; max-height:calc(100vh - 72px); width:100%; } }

/* ---------- 9 · cuadros: Trajes por ocasión y Hombre (EST:266-278) ---------- */
body .eg26p .eg26p-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:28px 12px; padding:0 var(--eg26p-g); }
body .eg26p .eg26p-tile{ position:relative; min-width:0; }
body .eg26p .eg26p-tile-foto{ display:block; aspect-ratio:4/5; background:var(--eg26p-c2); overflow:hidden; }
body .eg26p .eg26p-tile-foto img{ width:100%; height:100%; max-width:none; object-fit:cover; }
body .eg26p .eg26p-tile-n{ margin-top:12px; font:500 14px/1.3 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; }
body .eg26p .eg26p-tile-n a{ display:inline-flex; min-height:24px; align-items:center; }
body .eg26p .eg26p-tile-n a::after{ content:""; position:absolute; inset:0; }
body .eg26p .eg26p-tile:hover .eg26p-tile-n a{ text-decoration:underline; text-underline-offset:5px; }
body .eg26p .eg26p-tile-oc{ margin-top:2px; font:400 16px/1.4 var(--eg26p-ws); color:var(--eg26p-t2); }
@media (min-width:901px){
  body .eg26p .eg26p-tiles{ grid-template-columns:repeat(3,1fr); gap:48px 24px; }
  body .eg26p .eg26p-tiles--4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- 10 · Formentera · Último precio (EST:280-287) ---------- */
body .eg26p .eg26p-sec-fo{ background:var(--eg26p-fc); margin-top:80px; padding:56px 0 72px; }
body .eg26p .eg26p-fo-desde{ font:400 14px/1.45 var(--eg26p-ws); letter-spacing:.06em; text-transform:uppercase; color:var(--eg26p-t); }
body .eg26p .eg26p-fo-pronto{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 32px; margin:48px var(--eg26p-g) 0; padding-top:28px; border-top:1px solid rgba(26,26,26,.14); }
body .eg26p .eg26p-fo-pronto p{ font:300 22px/1.3 var(--eg26p-ws); letter-spacing:-.005em; }
body .eg26p .eg26p-fo-i{ font:italic 400 1.1em/1 var(--eg26p-fo); letter-spacing:0; }
@media (min-width:901px){
  body .eg26p .eg26p-sec-fo{ margin-top:144px; padding:96px 0 112px; }
  body .eg26p .eg26p-fo-pronto{ margin-top:72px; padding-top:40px; }
  body .eg26p .eg26p-fo-pronto p{ font-size:30px; }
}

/* ---------- 11 · zapatos (EST:289-291) ---------- */
body .eg26p .eg26p-zap > .eg26p-gw{ margin:0 0 24px; }
@media (min-width:901px){ body .eg26p .eg26p-zap > .eg26p-gw{ --dw:62vw; margin-bottom:36px; } }

/* ---------- 12 · Guías de estilo (EST:293-303) sobre las tarjetas .eg-post-card de eg-blog-carousel.php ----------
   La sección es section.eg-blog-home#eg26p-guias: se le da estilo por el id. Las tarjetas vienen de
   eg_blog_carousel_track_html() dentro de su propio .eg-carousel-wrap > .eg-blog-carousel: esos dos envoltorios pasan a
   display:contents y sus tarjetas quedan en la fila; sus flechas (sin data-carousel-dir) se esconden. */
body #eg26p-guias{ padding:80px 0 0; background:transparent; }
@media (min-width:901px){ body #eg26p-guias{ padding-top:144px; } }
body #eg26p-guias .eg26p-fila--blog{ grid-auto-columns:72%; }
@media (min-width:901px){ body #eg26p-guias .eg26p-fila--blog{ grid-auto-columns:calc((100% - 72px) / 4); } }
body #eg26p-guias .eg26p-fila--blog > .eg-carousel-wrap,
body #eg26p-guias .eg26p-fila--blog .eg-blog-carousel{ display:contents; }
body #eg26p-guias .eg26p-fila--blog .eg-carousel-btn{ display:none !important; }
body #eg26p-guias .eg-post-card{ position:relative; display:block; min-width:0; scroll-snap-align:start; }
body #eg26p-guias .eg-post-card-image{ display:block; aspect-ratio:3/4; background:var(--eg26p-c2); overflow:hidden; }
body #eg26p-guias .eg-post-card-image img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:center top; transform:none !important; transition:none; }
body #eg26p-guias .eg-post-card-body{ display:block; }
body #eg26p-guias .eg-post-card-eyebrow,
body #eg26p-guias .eg-post-card-meta{ display:none; }
body #eg26p-guias .eg-post-card-title{ margin:14px 0 0; font:400 17px/1.4 var(--eg26p-ws); letter-spacing:normal; color:var(--eg26p-t); }
body #eg26p-guias .eg-post-card-title a::after{ content:""; position:absolute; inset:0; }
body #eg26p-guias .eg-post-card:hover .eg-post-card-title a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
body #eg26p-guias .eg-post-card-lead{ margin:6px 0 0; font:400 16px/1.55 var(--eg26p-ws); color:var(--eg26p-t2); }

/* ---------- 13 · Tienda (EST:305-331): las 13 marcas invitadas mandan ---------- */
body .eg26p .eg26p-ti-w{ margin-top:80px; }
body .eg26p .eg26p-ti-w > .eg26p-gw{ text-align:center; line-height:.6; margin-bottom:-.16em; }
body .eg26p .eg26p-ti{ background:var(--eg26p-c2); padding:44px var(--eg26p-g) 64px; display:grid; }
body .eg26p .eg26p-ti .eg26p-t-l{ margin-top:8px; }
body .eg26p .eg26p-ti-marcas{ display:grid; gap:30px; margin-top:34px; }
body .eg26p .eg26p-tm ul{ display:grid; margin-top:8px; border-top:1px solid rgba(26,26,26,.16); }
body .eg26p .eg26p-tm li{ font:400 16px/1.3 var(--eg26p-ws); letter-spacing:.12em; text-transform:uppercase; padding:13px 0; border-bottom:1px solid rgba(26,26,26,.16); }
body .eg26p .eg26p-tm--2 ul{ grid-template-columns:1fr 1fr; column-gap:20px; }
body .eg26p .eg26p-ti-btn{ margin-top:36px; }
body .eg26p .eg26p-btn{ display:flex; width:100%; align-items:center; justify-content:center; min-height:52px; padding:0 28px; font:500 14px/1 var(--eg26p-ws); letter-spacing:.08em; text-transform:uppercase; background:var(--eg26p-t); color:var(--eg26p-c1) !important; border:1px solid var(--eg26p-t); transition:opacity .2s; }
body .eg26p .eg26p-btn:hover{ opacity:.86; }
body .eg26p .eg26p-ti-info{ margin-top:48px; padding-top:26px; border-top:1px solid rgba(26,26,26,.16); display:grid; gap:18px; font:400 16px/1.6 var(--eg26p-ws); }
body .eg26p .eg26p-ti-dir{ font:300 24px/1.25 var(--eg26p-ws); margin:4px 0 6px; }
body .eg26p .eg26p-ti-l{ display:grid; gap:6px; }
body .eg26p .eg26p-ti-acc{ display:flex; flex-wrap:wrap; gap:0 28px; align-items:center; }
@media (min-width:901px){
  body .eg26p .eg26p-ti-w{ margin-top:144px; }
  body .eg26p .eg26p-ti-w > .eg26p-gw{ text-align:left; --dw:58vw; }
  body .eg26p .eg26p-ti{ padding:84px var(--eg26p-g) 96px; }
  body .eg26p .eg26p-ti-marcas{ grid-template-columns:1fr 2fr 1fr; column-gap:48px; margin-top:52px; }
  body .eg26p .eg26p-tm--2 ul{ column-gap:48px; }
  body .eg26p .eg26p-tm li{ font-size:18px; padding:16px 0; }
  body .eg26p .eg26p-ti-btn{ margin-top:48px; }
  body .eg26p .eg26p-btn{ display:inline-flex; width:auto; }
  body .eg26p .eg26p-ti-info{ grid-template-columns:1.1fr 1fr auto; column-gap:64px; align-items:start; margin-top:80px; padding-top:40px; }
}

/* ---------- 14 · aparición suave (EST:565-568). html.eg26p-js lo pone portada-2026.js: sin JS no se esconde nada;
   lo que ya está en pantalla al cargar nunca se esconde; el héroe y su palabra no llevan .eg26p-ap ---------- */
html.eg26p-js body .eg26p .eg26p-ap{ opacity:0; transform:translateY(18px); }
html.eg26p-js body .eg26p .eg26p-ap.eg26p-v{ opacity:1; transform:none; transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){
  html.eg26p-js body .eg26p .eg26p-ap{ opacity:1; transform:none; transition:none; }
  body .eg26p .eg26p-card-foto .eg26p-f2.eg26p-pasa{ animation:none; }
  body .eg26p .eg26p-sf-a{ transition:none; }
}

/* ---------- 15 · Carteras Formentera (15-oct-2026, maqueta banner_carteras_15oct aprobada; piezas.php eg_portada26_b_carteras).
   Va en el lugar de «Último precio» (sección 10, que queda en la hoja para volver atrás). La sección entera va del crema de
   las fotos de producto (#F8F4E9, el fondo con que se suben todas): la cartera queda sin caja y la zona de mujer se distingue
   sola. Mismo ritmo que la franja vieja (.eg26p-sec-fo). Bloque grande con las clases de LINOS (espejo, foto a la derecha). ---------- */
body .eg26p .eg26p-sec-car{ --eg26p-c2:#F8F4E9; background:#F8F4E9; margin-top:80px; padding:56px 0 72px; }
/* foto de producto en el bloque grande: centrada (las de campaña se anclan arriba, 50% 0, y una cartera quedaba cortada) */
body .eg26p .eg26p-bloque--prod .eg26p-bloque-foto img{ object-position:50% 50%; }
/* las fotos de 'carteras'.'fotos' (canastos, hobo y tote): un 30 % más grandes en el celular, solo con CSS (el cuadro ya tiene
   overflow:hidden). Si la foto grande sale de la fila (otra forma), va sin esta clase. */
body .eg26p .eg26p-bloque-foto--zoom img{ transform:scale(1.3); }
body .eg26p .eg26p-bloque--prod .eg26p-acc{ gap:0 24px; margin-top:12px; }
@media (min-width:901px){
  body .eg26p .eg26p-sec-car{ margin-top:144px; padding:96px 0 112px; }
  body .eg26p .eg26p-bloque--prod.eg26p-bloque--der > .eg26p-gw{ --dw:58vw; }
  body .eg26p .eg26p-bloque--prod .eg26p-acc{ margin-top:8px; }
  /* en escritorio el cuadro es más ancho que la foto (720 × 560-820) y con cover la recortaba arriba y abajo: Rafael 15-oct
     (captura 19:04) vio la hobo con el asa cortada arriba. La foto de producto va ENTERA (contain) y sin zoom; el fondo de
     la foto y el de la sección son el mismo crema #F8F4E9, así que no se ve el borde. */
  body .eg26p .eg26p-bloque--prod .eg26p-bloque-foto img, body .eg26p .eg26p-bloque--prod .eg26p-bloque-foto img.eg26p-rota-i{ object-fit:contain; object-position:50% 50%; }
  /* Rafael 19:16: «ahora se ve muy chica». Entera (contain) y agrandada 1,4: medido sobre las 4 fotos que rotan (7195, 7202,
     7193, 7174), a 1,4 la cartera deja ≥5,8 % de margen arriba y abajo y de lado cabe de sobra (el cuadro es más ancho). */
  body .eg26p .eg26p-bloque-foto--zoom img{ transform:scale(1.4); }
}

/* ---------- 16 · fotos que rotan: mecanismo común de la portada (15-oct-2026; Rafael: «que roten todas, cuidando la
   velocidad»). Reemplaza el §16 de la tarea de Carteras (mismos nombres) y vale para cualquier caja [data-eg26p-rota]:
   bloque, cuadro de marca, cuadro de ocasiones/Hombre y editorial. portada-2026.js §3 cambia eg26p-rota-on. Fundido de
   1,5 s: la que entra sube por encima y la que sale queda entera debajo (eg26p-rota-sale) hasta que la otra terminó.
   Sin JS o con movimiento reducido: solo la 1.ª.
   El object-fit NO se pone aquí: lo decide cada caja (en Carteras de escritorio va contain, §15; Rafael 19:05/19:16).
   ⚠️ Los selectores van con img.eg26p-rota-i (especificidad 0,3,2) a propósito: en producción la 1.ª foto está en el lazy
   de LiteSpeed (data-lazyloaded) y eg-motion.php:98-99 le pone eg-fade / eg-loaded. En el CSS combinado de LiteSpeed la
   regla img[data-lazyloaded].eg-fade.eg-loaded{opacity:1} (0,3,1) va DESPUÉS de este archivo: con .eg26p-rota-i solo
   (0,3,1) empataba y ganaba ella (la 1.ª quedaba opaca para siempre y la vuelta a ella era un corte seco). En staging no
   se ve: allí no corren ni el lazy de LiteSpeed ni la combinación. ---------- */
body .eg26p [data-eg26p-rota]{ position:relative; isolation:isolate; }
body .eg26p [data-eg26p-rota] img.eg26p-rota-i{ position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:0; transition:opacity 1.5s ease-in-out; }
body .eg26p [data-eg26p-rota] img.eg26p-rota-i.eg26p-rota-on{ opacity:1; z-index:1; }
body .eg26p [data-eg26p-rota] img.eg26p-rota-i.eg26p-rota-sale{ opacity:1; transition:none; }
/* La 1.ª, mientras LiteSpeed no la baja: se ve el crema de la caja y no el gif gris de relleno (eg-motion le pone eg-fade al
   empezar y eg-loaded al cargar, o a los 4 s como red de seguridad, igual que a cualquier foto lazy de hoy). */
body .eg26p [data-eg26p-rota] img.eg26p-rota-i.eg26p-rota-on.eg-fade:not(.eg-loaded){ opacity:0; }
@media (prefers-reduced-motion:reduce){ body .eg26p [data-eg26p-rota] img.eg26p-rota-i{ transition:none; } }