/* GENERADO por _asistencia/islas/velocidad-movil/pruebas/construir-rediseno.py: NO EDITAR A MANO.
   Es la suma, en este orden, de: letras.css, eptd-home.css, sections/batch-A.css, sections/batch-B.css, sections/batch-C.css, sections/batch-D.css, sections/batch-E.css, sections/batch-F-producto.css, sections/batch-G-carrito.css, sections/batch-H-paginas.css, sections/batch-I-bloques.css, sections/batch-J-blog.css, sections/batch-K-categoria.css, eptd-cookies.css.
   Se edita la pieza y se vuelve a pasar el guion; la batería comprueba que este fichero está al día. */

/* ===== letras.css ===== */

/* GENERADO por _asistencia/islas/velocidad-movil/pruebas/bajar-letras.py desde fonts/letras.json: NO EDITAR A MANO.
   Las letras del tema (Lato y Nunito Sans, OFL) servidas desde la web, un @font-face por cara y subconjunto, con el
   unicode-range que da Google para que el navegador baje solo el subconjunto que pinta. Antes se pedían a Google
   Fonts en cada visita (functions.php, eptd-google-fonts). */
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../../fonts/lato-normal-1bbfdbdc-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../../fonts/lato-normal-38804233-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/lato-normal-d35cc700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/lato-normal-fcd41360-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/lato-normal-30128ef0-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/lato-normal-2ac78601-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(../../fonts/lato-normal-1333a05c-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(../../fonts/lato-normal-898d9808-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/nunito-sans-normal-6a3aecdb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/nunito-sans-normal-8a514e99-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../../fonts/nunito-sans-normal-6a3aecdb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../../fonts/nunito-sans-normal-8a514e99-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/nunito-sans-normal-6a3aecdb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/nunito-sans-normal-8a514e99-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/nunito-sans-normal-6a3aecdb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/nunito-sans-normal-8a514e99-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../../fonts/nunito-sans-normal-6a3aecdb-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../../fonts/nunito-sans-normal-8a514e99-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Prata";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/prata-normal-a91597d6-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===== eptd-home.css ===== */

/* ════════════════════════════════════════════════════════
   EPTD Home Master CSS — Tokens validados por cliente.
   Tipografía: Playfair Display (titulares serif) + Lato (cuerpo/UI).
   No redefinir :root ni utility classes .eptd-* en batches.
   ════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Modern No. 20';
  src: url('../../fonts/MOD20.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* PALETA — spec validada cliente */
  --eptd-rojo: #A61D24;
  --eptd-rojo-hover: #8B181E;
  --eptd-text: #333333;
  --eptd-text-muted: #666666;
  --eptd-text-soft: #888888;
  --eptd-white: #FFFFFF;
  --eptd-bg-alt: #F4F4F4;
  --eptd-bg-hero: #F9F9F9;
  --eptd-bg-formats: #EFEFEF;
  --eptd-border: #E0E0E0;
  --eptd-star: #FBBC05;
  --eptd-google-blue: #4285F4;

  /* Tokens que los batches ya usaban pero que nadie llegó a declarar.
     Sin ellos: .section-cta-intro se quedaba sin fondo (batch-B:12), la
     inicial del tercer avatar de reseña salía blanca sobre transparente
     (batch-D:94) y los iconos sociales del pie perdían su disco
     (batch-E:32 y :250).
     cream     — crema de marca, el mismo que ya se usaba en el proyecto.
     gold      — dorado oscurecido para que la inicial blanca contraste (4,8:1).
     rojo-dark — mismo valor que --eptd-rojo-hover. */
  --eptd-cream: #FAF8F5;
  --eptd-gold: #8C6E1C;
  --eptd-rojo-dark: #8B181E;

  /* TIPOGRAFÍA — Modern No.20 (custom) + Lato + Nunito Sans */
  --eptd-font-title: 'Modern No. 20', Georgia, 'Times New Roman', serif;
  --eptd-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --eptd-font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* TIPOGRAFÍA — tamaños fijos por spec */
  --eptd-fs-h1: 38px;
  --eptd-fs-h2: 32px;
  --eptd-fs-h3: 24px;
  --eptd-fs-body: 16px;
  --eptd-fs-small: 14px;

  --eptd-fw-regular: 400;
  --eptd-fw-medium: 500;
  --eptd-fw-bold: 700;

  /* LAYOUT — spec cliente */
  --eptd-max-width: 1200px;
  --eptd-section-py: 80px;
  --eptd-grid-gap: 30px;

  /* SPACING SCALE */
  --eptd-sp-xs: 0.5rem;
  --eptd-sp-sm: 1rem;
  --eptd-sp-md: 1.5rem;
  --eptd-sp-lg: 2.5rem;
  --eptd-sp-xl: 4rem;
  --eptd-sp-2xl: 5rem; /* 80px */

  /* RADIUS */
  --eptd-radius-card: 4px;
  --eptd-radius-pill: 50px;
  --eptd-radius-sm: 4px;
  --eptd-radius-md: 8px;

  /* SHADOW */
  --eptd-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --eptd-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05);
  --eptd-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

  /* MOTION */
  --eptd-trans: 0.3s ease;
}

/* ── BODY OVERRIDES (home + redesign pages) ── */
body.home,
body.eptd-redesign {
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-body);
  color: var(--eptd-text);
  background: var(--eptd-white);
  line-height: 1.6;
}

/* REDESIGN OVERRIDE: ocultar chrome del tema parent (header/footer/whatsapp flotante). */
body.home > header#main.fixed-top,
body.home > header.fixed-top,
body.home > footer,
body.home > .contact-whatsapp,
body.eptd-redesign > header#main.fixed-top,
body.eptd-redesign > header.fixed-top,
body.eptd-redesign > footer,
body.eptd-redesign > .contact-whatsapp { display: none !important; }

body.home,
body.home .site-content,
body.home .site,
body.home #content,
body.home #page,
body.eptd-redesign,
body.eptd-redesign .site-content,
body.eptd-redesign .site,
body.eptd-redesign #content,
body.eptd-redesign #page { padding-top: 0 !important; margin-top: 0 !important; }

body.home,
body.eptd-redesign { margin: 0 !important; padding: 0 !important; }

/* El envoltorio <picture class="eptd-webp"> de las fotos del tema con variantes WebP (isla velocidad-movil, 25-10):
   no es una caja, la <img> de dentro se maqueta como si colgara directa de su padre. */
.eptd-webp { display: contents; }
body.home main.eptd-home,
body.eptd-redesign main.eptd-home { margin: 0; padding: 0; }
body.home main.eptd-home > .section-header,
body.eptd-redesign main.eptd-home > .section-header { margin-top: 0; }

/* ── GLOBAL: IMAGE BORDER-RADIUS ── */
main.eptd-home .eptd-section img:not([class*="logo"]):not([class*="icon"]):not([class*="pay"]),
main.eptd-home section img:not([class*="logo"]):not([class*="icon"]):not([class*="pay"]) {
  border-radius: var(--eptd-radius-card);
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── UTILITY: SECTIONS ── */
.eptd-section {
  width: 100%;
  padding: var(--eptd-section-py) var(--eptd-sp-md);
  position: relative;
}
.eptd-section--tight { padding: var(--eptd-sp-xl) var(--eptd-sp-md); }
.eptd-section--alt { background: var(--eptd-bg-alt); }
.eptd-section--hero { background: var(--eptd-bg-hero); }
.eptd-section--formats { background: var(--eptd-bg-formats); }
.eptd-section--rojo { background: var(--eptd-rojo); color: var(--eptd-white); }
.eptd-section--white { background: var(--eptd-white); }

.eptd-container {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  width: 100%;
}
.eptd-container--narrow { max-width: 880px; }

/* ── UTILITY: TYPOGRAPHY ── */
.eptd-h1 {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h1);
  line-height: 1.2;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-md);
}
.eptd-h2 {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h2);
  line-height: 1.2;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-md);
  text-align: center;
}
.eptd-h2--white { color: var(--eptd-white); }
.eptd-h2--text { color: var(--eptd-text); }
.eptd-h3 {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h3);
  line-height: 1.3;
  color: var(--eptd-text);
  margin: 0 0 var(--eptd-sp-sm);
}

.eptd-eyebrow {
  font-family: var(--eptd-font-body);
  font-weight: var(--eptd-fw-bold);
  font-size: var(--eptd-fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-sm);
  text-align: center;
}

.eptd-sub {
  font-family: var(--eptd-font-body);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-body);
  line-height: 1.6;
  color: var(--eptd-text-muted);
  text-align: center;
  margin: 0 auto var(--eptd-sp-lg);
  max-width: 640px;
}

/* ── UTILITY: BUTTONS (pill style por spec) ── */
.eptd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--eptd-font-body);
  font-weight: var(--eptd-fw-bold);
  font-size: var(--eptd-fs-body);
  letter-spacing: 0;
  text-transform: none;
  padding: 0.85em 2.2em;
  border-radius: var(--eptd-radius-pill);
  text-decoration: none;
  /* Los colores cambian con la transición de siempre. El `transform` va aparte, corto y con una curva de salida
     fuerte: es la respuesta a pulsar el botón (más abajo, «Estados de los botones»). */
  transition: background-color var(--eptd-trans), color var(--eptd-trans), border-color var(--eptd-trans), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
  white-space: nowrap;
}
.eptd-btn-primary {
  background: var(--eptd-rojo);
  color: var(--eptd-white);
  border-color: var(--eptd-rojo);
}
.eptd-btn-outline {
  background: transparent;
  color: var(--eptd-rojo);
  border-color: var(--eptd-rojo);
}
.eptd-btn-outline-white {
  background: transparent;
  color: var(--eptd-white);
  border-color: var(--eptd-white);
}
/* El «encima» (isla home-por-bloques, 6-10-2026). Solo con un ratón de verdad: en un teléfono el «encima» se queda
   puesto después de tocar, y el botón se quedaba con el color de «encima» hasta tocar otra cosa.
   Fuera de esa condición se repite el color de REPOSO de cada botón, y hace falta: casi siempre es un enlace, y el
   `a:hover` del tema padre (css/bootstrap.min.css: azul) pesa más que una clase sola. */
.eptd-btn-primary:hover,
.eptd-btn-outline-white:hover { color: var(--eptd-white); }
.eptd-btn-outline:hover { color: var(--eptd-rojo); }
@media (hover: hover) and (pointer: fine) {
  .eptd-btn-primary:hover {
    background: var(--eptd-rojo-hover);
    border-color: var(--eptd-rojo-hover);
    transform: translateY(-1px);
  }
  .eptd-btn-outline:hover {
    background: var(--eptd-rojo);
    color: var(--eptd-white);
  }
  .eptd-btn-outline-white:hover {
    background: var(--eptd-white);
    color: var(--eptd-rojo);
  }
}

/* ── UTILITY: GRIDS ── */
.eptd-grid {
  display: grid;
  gap: var(--eptd-grid-gap);
}
.eptd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.eptd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.eptd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.eptd-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ── RESPONSIVE BREAKPOINTS GLOBAL ── */
@media (max-width: 1099px) {
  :root { --eptd-section-py: 60px; }
  .eptd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .eptd-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  :root {
    --eptd-section-py: 48px;
    --eptd-fs-h1: 30px;
    --eptd-fs-h2: 26px;
    --eptd-fs-h3: 20px;
  }
  .eptd-grid-2,
  .eptd-grid-3,
  .eptd-grid-4 { grid-template-columns: 1fr; }
  .eptd-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   Estados de los botones (2026-09-11)

   Ningún CTA del diseño nuevo tenía foco visible, así que navegando con
   teclado no se veía dónde estabas; tampoco había estado desactivado, y el
   formulario de teléfono tiene una casilla obligatoria. El anillo cambia de
   color según el fondo: rojo sobre claro, blanco sobre el bloque rojo.
   ───────────────────────────────────────────────────────────── */
.eptd-btn:focus-visible,
.section-carrito__seguir:focus-visible,
.review-card__more:focus-visible {
  outline: 3px solid var(--eptd-rojo);
  outline-offset: 3px;
}
.section-footer-cta__faq-cta:focus-visible,
.section-footer-cta__help-form button:focus-visible,
.section-footer-cta__help-consent input:focus-visible,
.section-footer-cta__help-form input:focus-visible,
.section-header__burger:focus-visible,
.section-header__cart:focus-visible,
.section-footer__list a:focus-visible,
.section-footer__legal a:focus-visible,
.section-footer__social a:focus-visible,
.section-header__nav a:focus-visible {
  outline: 3px solid var(--eptd-white);
  outline-offset: 3px;
}

/* Al pulsarlo, el botón se hunde un poco (isla home-por-bloques, 6-10-2026): con el dedo no hay «encima», y sin esto
   pulsar no hacía nada a la vista. Va detrás de los «encima» de arriba para mandar sobre ellos mientras se pulsa. */
.eptd-btn:active {
  transform: scale(0.97);
}
.eptd-btn[disabled],
.eptd-btn[aria-disabled="true"],
.section-footer-cta__help-form button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* La hamburguesa no tenía ninguna reacción al pasar por encima. */
.section-header__burger:hover {
  opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
  .eptd-btn,
  .eptd-btn:hover,
  .eptd-btn:active {
    transition: none;
    transform: none;
  }
}

/* ===== sections/batch-A.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH A — Header + Hero
   Diseño: cliente/DESIGN/0_HEADER_AND_HERO.png
   Hereda :root vars y utility classes de eptd-home.css
   ════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   0a · HEADER / NAVBAR
   ─────────────────────────────────────────────── */
.section-header {
  width: 100%;
  background: var(--eptd-rojo);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
}
.section-header__inner {
  max-width: 100%;
  margin: 0;
  height: 100px;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.section-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  background: var(--eptd-white);
  margin: 0;
  padding: 0;
  height: 100%;
  width: 20vw;
}
.section-header__logo img {
  height: 60px;
  width: auto;
  display: block;
  margin: 0 50px 0 auto;
}
.section-header__nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  list-style: none;
  margin: 0 0 0 15vw;
  padding: 0;
  width: 45vw;
  flex-shrink: 0;
  white-space: nowrap;
}
.section-header__nav a {
  font-family: var(--eptd-font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eptd-white);
  text-decoration: none;
  padding: 0.25rem 0;
  position: relative;
  transition: opacity 0.2s;
}
.section-header__nav a:hover {
  color: var(--eptd-white);
  opacity: 0.78;
}
.section-header__nav a.is-active {
  color: var(--eptd-white);
  font-weight: 800;
}
.section-header__nav a.is-active::after {
  content: none;
}
.section-header__actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: 5vw;
  margin-right: 7vw;
  width: 5vw;
  justify-content: center;
}
.section-header__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--eptd-white);
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
}
.section-header__cart:hover {
  background: transparent;
  color: var(--eptd-white);
  opacity: 0.78;
}
.section-header__cart svg,
.section-header__cart .section-header__cart-icon {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 0 !important;
  filter: brightness(0) invert(1);
}
.section-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--eptd-white);
  color: var(--eptd-rojo);
  border-radius: 8px;
  font-family: var(--eptd-font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.section-header__burger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--eptd-white);
}
.section-header__burger svg {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
}

/* ───────────────────────────────────────────────
   0b · HERO (imagen full-width)
   ─────────────────────────────────────────────── */
.section-hero {
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
}
.section-hero__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0 !important;
}

/* ───────────────────────────────────────────────
   RESPONSIVE — Tablet (768–1099)
   ─────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .section-header__inner {
    height: 64px;
  }
  .section-header__nav {
    gap: var(--eptd-sp-md);
  }
  .section-header__nav a {
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }
  .section-header__logo img {
    height: 42px;
  }
  .section-hero {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md) var(--eptd-sp-lg);
  }
}

/* ───────────────────────────────────────────────
   RESPONSIVE — Mobile (<768)
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-header__inner {
    height: 60px;
    padding: 0 var(--eptd-sp-sm);
  }
  .section-header__nav {
    display: none;
  }
  .section-header__nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--eptd-sp-sm) var(--eptd-sp-md);
    background: var(--eptd-rojo);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  .section-header__nav.is-open a {
    width: 100%;
    padding: var(--eptd-sp-sm) 0;
  }
  .section-header__inner {
    position: relative;
  }
  .section-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .section-header__logo img {
    height: 38px;
  }
  .section-header__cart {
    width: 38px;
    height: 38px;
  }
  .section-hero {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-hero__title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
  }
  .section-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }
  .section-hero__title-pre {
    font-size: 0.7em;
  }
}

/* ─────────────────────────────────────────────────────────────
   Cabecera en móvil — corrección medida a 390 px (2026-09-11)

   Antes: .section-header__actions valía 5vw (20 px) y contenía una
   hamburguesa de 40 px y un carrito de 38 px sin flex-shrink, así que
   los dos se aplastaban: la hamburguesa quedaba en 24 px y el carrito
   en 0 px de ancho. La imagen del logo conservaba su margen derecho de
   50 px del escritorio y sobresalía 3 px por la izquierda de su caja.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-header__logo {
    width: auto;
    padding: 0 var(--eptd-sp-sm);
  }
  .section-header__logo img {
    margin: 0;
  }
  .section-header__actions {
    width: auto;
    margin-left: auto;
    margin-right: var(--eptd-sp-sm);
    gap: var(--eptd-sp-xs);
    flex-shrink: 0;
  }
  .section-header__burger,
  .section-header__cart {
    flex-shrink: 0;
  }
  /* Área táctil mínima recomendada. El icono conserva su tamaño. */
  .section-header__burger {
    width: 44px;
    height: 44px;
  }
  .section-header__cart {
    width: 44px;
    height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Icono de carrito

   Ya no se oculta por CSS: partials/header_eptd.php solo lo imprime
   cuando el carrito tiene artículos, leyendo Carrito::getInfoCarrito().
   Antes preguntaba por WooCommerce, que no está instalado, así que el
   contador siempre valía cero y el icono llevaba a un carrito vacío.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Hero — titular como texto real (2026-09-11)

   El titular estaba incrustado en hero.jpg. En escritorio se lee, pero a
   390 px la imagen se pinta a un 19 % y el titular queda en unos 7 px de
   alto: ilegible. Ahora existe como <h1> —la home tampoco tenía ninguno— y
   en móvil se sirve hero-movil.jpg, el mismo hero recortado a los tres
   productos y sin texto, para que no aparezca dos veces.

   En escritorio el h1 se oculta a la vista pero sigue disponible para
   lectores de pantalla y buscadores, porque la imagen ya trae ese texto.
   ───────────────────────────────────────────────────────────── */
.section-hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .section-hero {
    padding: 0 0 var(--eptd-sp-md);
  }
  .section-hero__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--eptd-sp-lg) var(--eptd-sp-md) var(--eptd-sp-md);
    overflow: visible;
    clip-path: none;
    white-space: normal;
    text-align: center;
    font-family: var(--eptd-font-title);
    font-weight: var(--eptd-fw-regular);
    color: var(--eptd-rojo);
    line-height: 1.12;
    text-wrap: balance;
  }
  .section-hero__title-pre {
    display: block;
    font-family: var(--eptd-font-body);
    font-weight: var(--eptd-fw-regular);
    font-style: normal;
    color: var(--eptd-text-muted);
    letter-spacing: 0.01em;
    margin-bottom: 0.35em;
  }
  /* La imagen de móvil ya viene recortada: a sangre y sin deformar. */
  .section-hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 563;
    object-fit: cover;
  }
}

/* ─────────────────────────────────────────────────────────────
   Llamada a la acción del hero — solo móvil (2026-09-11)

   En móvil el primer botón de la home aparecía tras unos 1.500 px de
   desplazamiento: la portada no ofrecía ninguna salida sin hacer scroll.
   En escritorio no se muestra, porque ahí el primer CTA ya entra casi en
   la primera pantalla y el hero es una imagen a sangre.
   ───────────────────────────────────────────────────────────── */
.section-hero__cta {
  display: none;
}
@media (max-width: 767px) {
  .section-hero__cta {
    display: inline-flex;
    margin: var(--eptd-sp-md) auto 0;
  }
  .section-hero {
    display: flex;
    flex-direction: column;
  }
}

/* ===== sections/batch-B.css ===== */

/* ════════════════════════════════════════════════════════
   Batch B · Sections 1 (CTA Intro) + 2 (Catálogo)
   Solo clases section-specific. No tocar tokens master.
   ════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   SECTION 1 · .section-cta-intro
   Layout: imagen izquierda + bloque texto derecha
   Fondo cream, titular Modern No.20 italic, CTA rojo centrado.
   ───────────────────────────────────────────────────────── */
.section-cta-intro {
  background: var(--eptd-cream);
  padding: var(--eptd-sp-2xl) var(--eptd-sp-md);
}

.section-cta-intro__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
}

.section-cta-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--eptd-sp-xl);
  align-items: center;
}

.section-cta-intro__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-cta-intro__media img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--eptd-radius-card);
}

.section-cta-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.section-cta-intro__title {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-md);
  text-align: left;
}

.section-cta-intro__text {
  font-family: var(--eptd-font-body);
  font-size: clamp(0.98rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: var(--eptd-text-muted);
  margin: 0;
  max-width: 480px;
  text-align: left;
}

.section-cta-intro__cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--eptd-sp-xl);
}

.section-cta-intro__cta {
  align-self: center;
}

/* Responsive: tablet */
@media (max-width: 1099px) {
  .section-cta-intro {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .section-cta-intro__inner {
    gap: var(--eptd-sp-lg);
  }
  .section-cta-intro__media img {
    max-width: 380px;
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {
  .section-cta-intro {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-cta-intro__inner {
    text-align: center;
  }
  .section-cta-intro__row {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-lg);
  }
  .section-cta-intro__media img {
    max-width: 320px;
    width: 100%;
  }
  .section-cta-intro__content {
    align-items: center;
  }
  .section-cta-intro__title {
    font-size: clamp(1.7rem, 7.5vw, 2.1rem);
  }
  .section-cta-intro__text {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────
   SECTION 2 · .section-catalog
   Layout: titular centrado + grid 3×2 (desktop) / 2×3 / 1×6
   Cada card: imagen + título rojo bajo
   ───────────────────────────────────────────────────────── */
.section-catalog {
  background: var(--eptd-white);
  padding: var(--eptd-sp-2xl) var(--eptd-sp-md);
}

.section-catalog__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-catalog__title {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--eptd-rojo);
  text-align: center;
  margin: 0 0 var(--eptd-sp-xl);
}

.section-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eptd-sp-lg) var(--eptd-sp-md);
}

.section-catalog__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  /* Un solo `transform` para levantarse (con ratón) y para hundirse al pulsar: corto y con curva de salida fuerte. */
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* La tarjeta es un enlace: este color va fuera de la condición del «encima» (más abajo) porque el `a:hover` del tema
   padre (css/bootstrap.min.css: azul) pesa más que una clase sola, y en un teléfono el «encima» se queda puesto. */
.section-catalog__card:hover {
  color: inherit;
}

.section-catalog__card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: var(--eptd-bg-alt);
  margin-bottom: var(--eptd-sp-sm);
}

.section-catalog__card-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.4s ease;
  border-radius: 0 !important;
}

.section-catalog__card-title {
  font-family: var(--eptd-font-ui);
  font-weight: var(--eptd-fw-bold);
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--eptd-rojo);
  text-align: center;
  margin: 0.5rem 0 0;
  transition: color var(--eptd-trans);
}

/* Interacción de la tarjeta (isla home-por-bloques, 6-10-2026).
   · El «encima» (se levanta, la foto se acerca, el título oscurece), solo con un ratón de verdad: en un teléfono se
     quedaba levantada después de tocarla.
   · Al pulsarla se hunde un poco: es un enlace grande, y con el dedo no había ninguna respuesta. Va detrás del
     «encima» para mandar sobre él mientras se pulsa.
   · Con «reducir movimiento», ni se mueve ni se anima nada; el título sigue cambiando de color, sin transición. */
@media (hover: hover) and (pointer: fine) {
  .section-catalog__card:hover {
    transform: translateY(-3px);
  }
  .section-catalog__card:hover .section-catalog__card-media img {
    transform: scale(1.03);
  }
  .section-catalog__card:hover .section-catalog__card-title {
    color: var(--eptd-rojo-hover);
  }
}
.section-catalog__card:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .section-catalog__card,
  .section-catalog__card-media img,
  .section-catalog__card-title {
    transition: none;
  }
  .section-catalog__card:hover,
  .section-catalog__card:active,
  .section-catalog__card:hover .section-catalog__card-media img {
    transform: none;
  }
}

/* Responsive: tablet */
@media (max-width: 1099px) {
  .section-catalog {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .section-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-catalog__title {
    margin-bottom: var(--eptd-sp-lg);
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {
  .section-catalog {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-catalog__grid {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-lg);
    max-width: 320px;
    margin: 0 auto;
  }
  .section-catalog__title {
    font-size: clamp(1.7rem, 7.5vw, 2.1rem);
    margin-bottom: var(--eptd-sp-lg);
  }
  .section-catalog__card-media {
    aspect-ratio: 4 / 5;
  }
}

/* ===== sections/batch-C.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH C — Formatos (3) + Listo para regalar (4)
   Diseño: cliente/DESIGN/3_SECTION_MATERIALS.png
           cliente/DESIGN/4_SECTION_2ND_CTA.png
   Hereda :root vars y utility classes de eptd-home.css
   ════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   3 · FORMATOS "Elige el formato que prefieras"
   ─────────────────────────────────────────────── */
.section-materials {
  width: 100%;
  background: var(--eptd-bg-formats);
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-materials__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.section-materials__title {
  margin: 0 0 var(--eptd-sp-xl);
  text-align: center;
  font-size: 35px;
}
.section-materials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eptd-sp-lg);
}
.section-materials__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-materials__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--eptd-white);
  margin-bottom: var(--eptd-sp-md);
  border-radius: 0;
}
.section-materials__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0 !important;
}
.section-materials__name {
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-xs);
}
.section-materials__desc {
  font-family: var(--eptd-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--eptd-rojo);
  margin: 0;
  max-width: 280px;
}

/* ───────────────────────────────────────────────
   4 · LISTO PARA REGALAR — fondo cream/white con imagen + copy + CTA rojo
   ─────────────────────────────────────────────── */
.section-regalo {
  width: 100%;
  background: var(--eptd-white);
  color: var(--eptd-text);
  padding: var(--eptd-sp-2xl) var(--eptd-sp-md);
}
.section-regalo__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eptd-sp-xl);
  align-items: center;
}
.section-regalo__media {
  width: 100%;
  order: 1;
}
.section-regalo__content {
  order: 2;
}
.section-regalo__media img {
  width: 100%;
  height: auto;
  display: block;
}
.section-regalo__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 520px;
}
.section-regalo__title {
  text-align: left;
  margin: 0 0 var(--eptd-sp-md);
}
.section-regalo__copy {
  font-family: var(--eptd-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--eptd-text-muted);
  margin: 0 0 var(--eptd-sp-lg);
}
.section-regalo__cta {
  display: inline-flex;
}

/* ───────────────────────────────────────────────
   RESPONSIVE — Tablet (768–1099)
   ─────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .section-materials {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .section-materials__grid {
    gap: var(--eptd-sp-md);
  }
  .section-regalo {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .section-regalo__inner {
    gap: var(--eptd-sp-lg);
  }
}

/* ───────────────────────────────────────────────
   RESPONSIVE — Mobile (<768)
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-materials {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-materials__title {
    margin: 0 0 var(--eptd-sp-lg);
  }
  .section-materials__grid {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-lg);
  }
  .section-materials__media {
    aspect-ratio: 16 / 10;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .section-materials__desc {
    max-width: 320px;
  }

  .section-regalo {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-regalo__inner {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-lg);
    text-align: center;
  }
  .section-regalo__content {
    align-items: center;
    max-width: none;
  }
  .section-regalo__title {
    text-align: center;
  }
  .section-regalo__copy {
    text-align: center;
  }
}

/* ===== sections/batch-D.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH D — Reseñas Google + Trust badges / Métodos de pago
   Diseño: cliente/DESIGN/5_REVIEWS_GOOGLE.png
           cliente/DESIGN/6_LOGOS_AND_PAYMETHODS.png
   Hereda :root vars y utility classes de eptd-home.css
   ════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   5 · RESEÑAS GOOGLE REVIEWS
   ─────────────────────────────────────────────── */
.section-reviews {
  background: var(--eptd-white);
}
.section-reviews__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.section-reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eptd-sp-xs);
  margin-bottom: var(--eptd-sp-lg);
}
.section-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--eptd-font-ui);
  font-size: 1rem;
  color: var(--eptd-text);
}
.section-reviews__rating-score {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--eptd-text);
}
.section-reviews__rating-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--eptd-star);
  font-size: 1.1rem;
  line-height: 1;
}
.section-reviews__rating-meta {
  color: var(--eptd-text-muted);
  font-size: 0.9rem;
}

.section-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eptd-sp-md);
}

.review-card {
  background: var(--eptd-white);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  padding: var(--eptd-sp-md);
  box-shadow: var(--eptd-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
/* Se levanta al pasar el ratón, y solo con un ratón de verdad (isla home-por-bloques, 6-10-2026): en un teléfono se
   quedaba levantada después de tocarla. No se pulsa (no es un enlace), así que no tiene estado «pulsada». */
@media (hover: hover) and (pointer: fine) {
  .review-card:hover {
    box-shadow: var(--eptd-shadow-md);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none; }
  .review-card:hover { transform: none; }
}
.review-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--eptd-font-ui);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--eptd-white);
  flex-shrink: 0;
  text-transform: uppercase;
}
.review-card__avatar--teal   { background: #1faea6; }
.review-card__avatar--purple { background: #7a4ec9; }
.review-card__avatar--blue   { background: var(--eptd-google-blue); }
.review-card__avatar--rojo   { background: var(--eptd-rojo); }
.review-card__avatar--gold   { background: var(--eptd-gold); }
.review-card__avatar--graphite { background: #4a4a4a; }

.review-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-card__name {
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--eptd-text);
  line-height: 1.2;
}
.review-card__date {
  font-family: var(--eptd-font-ui);
  font-size: 0.8125rem;
  color: var(--eptd-text-muted);
}

.review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--eptd-star);
  font-size: 0.95rem;
  line-height: 1;
}
.review-card__stars::before {
  content: "";
}
.review-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--eptd-google-blue);
  color: var(--eptd-white);
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 4px;
}

.review-card__text {
  font-family: var(--eptd-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--eptd-text);
  margin: 0;
}
.review-card__more {
  font-family: var(--eptd-font-ui);
  font-size: 0.8125rem;
  color: var(--eptd-text-muted);
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.25rem;
}
.review-card__more:hover {
  color: var(--eptd-rojo);
  text-decoration: underline;
}

/* ───────────────────────────────────────────────
   6 · TRUST BADGES + MÉTODOS DE PAGO
   ─────────────────────────────────────────────── */
.section-trust {
  background: var(--eptd-white);
  padding-top: var(--eptd-sp-xl);
  padding-bottom: var(--eptd-sp-xl);
}
.section-trust__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--eptd-sp-xl);
}

.section-trust__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eptd-sp-md);
  align-items: start;
  justify-items: center;
}
.trust-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  max-width: 240px;
}
.trust-benefit__icon {
  width: auto;
  height: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--eptd-text-muted);
}
.trust-benefit__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-benefit__icon img {
  width: auto !important;
  height: 150px !important;
  display: block;
  object-fit: contain;
  border-radius: 0 !important;
}
.trust-benefit__text {
  font-family: var(--eptd-font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--eptd-text-muted);
  margin: 0;
}
.trust-benefit__text strong {
  color: var(--eptd-text);
  font-weight: 700;
}

.section-trust__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--eptd-sp-lg);
  filter: grayscale(1);
  opacity: 0.6;
}
.pay-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.pay-method__label {
  font-family: var(--eptd-font-ui);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--eptd-text);
  text-align: center;
}
.pay-method__logo {
  height: 45px !important;
  width: auto !important;
  max-width: 180px;
  max-height: 45px;
  object-fit: contain;
  display: block;
}
.pay-method__logo--tall { height: 45px; max-height: 45px; }

/* ───────────────────────────────────────────────
   RESPONSIVE — Tablet 768-1099
   ─────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .section-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-trust__benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eptd-sp-sm);
  }
  .trust-benefit__icon {
    width: 56px;
    height: 56px;
  }
  .section-trust__pay {
    gap: var(--eptd-sp-md);
  }
}

/* ───────────────────────────────────────────────
   RESPONSIVE — Mobile <768
   ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .section-reviews__grid {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-sm);
  }
  .section-reviews__head {
    margin-bottom: var(--eptd-sp-md);
  }
  .review-card {
    padding: var(--eptd-sp-sm);
  }
  .section-trust {
    padding-top: var(--eptd-sp-lg);
    padding-bottom: var(--eptd-sp-lg);
  }
  .section-trust__inner {
    gap: var(--eptd-sp-lg);
  }
  .section-trust__benefits {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-md);
  }
  .trust-benefit {
    max-width: 320px;
  }
  .section-trust__pay {
    gap: var(--eptd-sp-md) var(--eptd-sp-lg);
  }
  .pay-method__logo { height: 28px; max-height: 28px; }
  .pay-method__logo--tall { height: 30px; max-height: 30px; }
}

/* ===== sections/batch-E.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH E — Footer CTA (7) + Footer (8)
   Diseño: cliente/DESIGN/7_FOOTER_CTA.png + 8_FOOTER.png
   Hereda :root vars y utility classes de eptd-home.css
   ════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   SECTION 7 · .section-footer-cta
   Layout: izquierda FAQ con imagen de fondo (FOOTER_0.jpg) +
   derecha panel rojo "¿Necesitas ayuda?" con formulario.
   ───────────────────────────────────────────────────────── */
.section-footer-cta {
  width: 100%;
  background: var(--eptd-rojo);
  margin: 0;
  padding-bottom: 0;
}
.section-footer-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 360px;
}

/* —— Lado izquierdo: FAQ con imagen de fondo —— */
.section-footer-cta__faq {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  background-color: var(--eptd-rojo-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--eptd-white);
  text-align: center;
  overflow: hidden;
}
.section-footer-cta__faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}
.section-footer-cta__faq > * {
  position: relative;
  z-index: 2;
}
.section-footer-cta__faq-title {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: var(--eptd-white);
  margin: 0 0 var(--eptd-sp-md);
}
.section-footer-cta__faq-cta {
  /* Botón outline blanco compacto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eptd-white);
  background: transparent;
  border: 1.5px solid var(--eptd-white);
  padding: 0.85em 1.8em;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Interacción (isla home-por-bloques, 6-10-2026). El «encima», solo con un ratón de verdad: en un teléfono se quedaba
   en blanco después de tocarlo. Fuera de esa condición se repite el color de reposo, y hace falta: es un enlace, y el
   `a:hover` del tema padre (css/bootstrap.min.css: azul) pesa más que una clase sola. Al pulsarlo se hunde un poco. */
.section-footer-cta__faq-cta:hover {
  color: var(--eptd-white);
}
@media (hover: hover) and (pointer: fine) {
  .section-footer-cta__faq-cta:hover {
    background: var(--eptd-white);
    color: var(--eptd-rojo);
  }
}
.section-footer-cta__faq-cta:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .section-footer-cta__faq-cta { transition: none; }
  .section-footer-cta__faq-cta:active { transform: none; }
}

/* —— Lado derecho: panel rojo formulario —— */
.section-footer-cta__help {
  background: var(--eptd-rojo);
  color: var(--eptd-white);
  padding: var(--eptd-sp-xl) clamp(var(--eptd-sp-md), 4vw, var(--eptd-sp-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-footer-cta__help-title {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 var(--eptd-sp-md);
  color: var(--eptd-white);
}
.section-footer-cta__help-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--eptd-font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--eptd-white);
  margin: 0 0 var(--eptd-sp-sm);
}
.section-footer-cta__help-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--eptd-white);
  cursor: pointer;
}
.section-footer-cta__help-consent a {
  color: var(--eptd-white);
  text-decoration: underline;
}
.section-footer-cta__help-consent a:hover {
  opacity: 0.85;
}
.section-footer-cta__help-legal {
  font-family: var(--eptd-font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--eptd-white);
  opacity: 0.92;
  margin: 0 0 var(--eptd-sp-md);
}
.section-footer-cta__help-legal a {
  color: var(--eptd-white);
  text-decoration: underline;
}
.section-footer-cta__help-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: stretch;
}
.section-footer-cta__help-form input[type="tel"] {
  width: 100%;
  background: var(--eptd-white);
  color: var(--eptd-text);
  border: none;
  border-radius: 2px;
  padding: 0.9em 1em;
  font-family: var(--eptd-font-body);
  font-size: 0.95rem;
  line-height: 1.2;
  outline: none;
}
.section-footer-cta__help-form input[type="tel"]::placeholder {
  color: var(--eptd-text-soft);
}
.section-footer-cta__help-form input[type="tel"]:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.section-footer-cta__help-form button {
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eptd-white);
  background: transparent;
  border: 1.5px solid var(--eptd-white);
  padding: 0 1.8em;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1;
}
.section-footer-cta__help-form button:hover {
  background: var(--eptd-white);
  color: var(--eptd-rojo);
}

/* ─────────────────────────────────────────────────────────
   SECTION 8 · .section-footer
   Footer rojo 4 columnas + barra inferior con legal links.
   ───────────────────────────────────────────────────────── */
.section-footer {
  background: var(--eptd-rojo);
  color: var(--eptd-white);
  padding: 0 var(--eptd-sp-md);
  margin: 0;
}
.section-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--eptd-sp-lg);
  /* (7-10, Fran) Relleno arriba: en las páginas de texto (FAQ, contacto, legales, blog) las columnas empezaban pegadas
     al borde del pie. Detrás de la franja roja de «Preguntas y ayuda» (home, Personaliza tu portada) sobra: ver abajo. */
  padding-top: var(--eptd-sp-xl);
  padding-bottom: var(--eptd-sp-xl);
}
.section-footer-cta + .section-footer .section-footer__inner { padding-top: 0; }
.section-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section-footer__title {
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--eptd-white);
  margin: 0 0 0.4rem;
}
.section-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.section-footer__list a,
.section-footer__col p,
.section-footer__col a {
  font-family: var(--eptd-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--eptd-white);
  text-decoration: none;
}
.section-footer__list a:hover,
.section-footer__col a:hover {
  text-decoration: underline;
}
.section-footer__col p {
  margin: 0;
}
.section-footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.section-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--eptd-rojo-dark);
  color: var(--eptd-white);
  transition: background-color 0.2s, transform 0.2s;
}
.section-footer__social a:hover {
  background: var(--eptd-white);
  color: var(--eptd-rojo);
  transform: translateY(-1px);
}
.section-footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* —— Barra inferior legal —— */
.section-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.section-footer__bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--eptd-sp-md) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--eptd-sp-md);
}
.section-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eptd-sp-lg);
}
.section-footer__legal a {
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--eptd-white);
  text-decoration: none;
}
.section-footer__legal a:hover {
  text-decoration: underline;
}
.section-footer__copy {
  font-family: var(--eptd-font-body);
  font-size: 0.875rem;
  color: var(--eptd-white);
  opacity: 0.92;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .section-footer-cta__inner {
    min-height: 320px;
  }
  .section-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eptd-sp-lg);
  }
  .section-footer__bottom-inner {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .section-footer-cta__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .section-footer-cta__faq {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
    min-height: 260px;
  }
  .section-footer-cta__help {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  }
  .section-footer-cta__help-form {
    grid-template-columns: 1fr;
  }
  .section-footer-cta__help-form button {
    padding: 0.9em 1.8em;
  }
  .section-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--eptd-sp-md);
    padding-bottom: var(--eptd-sp-lg);
  }
  .section-footer {
    padding: var(--eptd-sp-lg) var(--eptd-sp-md) 0;
  }
  .section-footer__title {
    font-size: 1.35rem;
  }
  .section-footer__legal {
    gap: var(--eptd-sp-md);
    justify-content: center;
  }
}

/* ===== sections/batch-F-producto.css ===== */

/* ════════════════════════════════════════════════════════
   EPTD Single Producto — Secciones específicas del template
   ficha_producto.php. Reutiliza tokens y utilities del master
   (eptd-home.css). No redefinir :root.
   ════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────
   SECTION · PRODUCT HERO
   Variante del .section-cta-intro para mostrar UN producto.
   ──────────────────────────────────────────────────────── */
.section-product-hero {
  background: var(--eptd-bg-hero);
}

.section-product-hero .section-cta-intro__content .eptd-eyebrow {
  margin-bottom: var(--eptd-sp-xs);
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--eptd-rojo);
  text-transform: uppercase;
  font-weight: var(--eptd-fw-bold);
}

.section-product-hero__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: var(--eptd-sp-md) 0 var(--eptd-sp-sm);
}

.section-product-hero__price-label {
  font-family: var(--eptd-font-ui);
  font-size: 14px;
  color: var(--eptd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section-product-hero__price-amount {
  font-family: var(--eptd-font-title);
  font-size: 42px;
  color: var(--eptd-rojo);
  font-weight: var(--eptd-fw-bold);
  line-height: 1;
}

.section-product-hero__cta-row {
  margin-top: var(--eptd-sp-md);
}


/* ────────────────────────────────────────────────────────
   SECTION · TRUST STRIP COMPACTO (debajo del hero)
   ──────────────────────────────────────────────────────── */
.section-product-trust {
  background: var(--eptd-bg-alt);
  border-top: 1px solid var(--eptd-border);
  border-bottom: 1px solid var(--eptd-border);
}

.section-product-trust__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--eptd-font-ui);
  font-size: 14px;
  color: var(--eptd-text);
}

.section-product-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--eptd-fw-medium);
}

.section-product-trust__stars {
  color: var(--eptd-star);
  font-size: 16px;
  letter-spacing: 1px;
}

.section-product-trust__divider {
  width: 1px;
  height: 18px;
  background: var(--eptd-border);
}

@media (max-width: 640px) {
  .section-product-trust__divider { display: none; }
  .section-product-trust__inner { padding: 14px 16px; gap: 12px; font-size: 13px; }
}


/* ────────────────────────────────────────────────────────
   SECTION · FUNNEL (donde el React app se monta inline)
   ──────────────────────────────────────────────────────── */
.section-product-funnel {
  padding: var(--eptd-section-py) 0;
  background: var(--eptd-white);
  scroll-margin-top: 24px;
}

.section-product-funnel__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-product-funnel__title {
  font-family: var(--eptd-font-title);
  font-size: var(--eptd-fs-h2);
  color: var(--eptd-rojo);
  text-align: center;
  margin: 0 0 var(--eptd-sp-sm);
  line-height: 1.2;
}

.section-product-funnel__subtitle {
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-body);
  color: var(--eptd-text-muted);
  text-align: center;
  margin: 0 auto var(--eptd-sp-lg);
  max-width: 680px;
}

/* El plugin pdtd-funnel inyecta #pdtd-funnel-app justo después de #frmProducto.
   Forzamos full-width para que el wizard React respire en la sección. */
.section-product-funnel #pdtd-funnel-app {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}


/* ────────────────────────────────────────────────────────
   SECTION · PRODUCT INFO (precios + marcos)
   ──────────────────────────────────────────────────────── */
.section-product-info {
  padding: var(--eptd-section-py) 0;
  background: var(--eptd-bg-alt);
}

.section-product-info__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-product-info__title {
  text-align: center;
  margin: 0 0 var(--eptd-sp-lg);
  color: var(--eptd-rojo);
}

.section-product-info__sub {
  font-family: var(--eptd-font-ui);
  font-size: 18px;
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-text);
  margin: 0 0 var(--eptd-sp-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-product-info__pricing {
  background: var(--eptd-white);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  padding: var(--eptd-sp-lg);
  margin-bottom: var(--eptd-sp-lg);
  box-shadow: var(--eptd-shadow-sm);
}

.section-product-info__price-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-product-info__price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--eptd-border);
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-body);
}

.section-product-info__price-list li:last-child {
  border-bottom: none;
}

.section-product-info__price-name {
  color: var(--eptd-text);
}

.section-product-info__price-value {
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-ui);
}

.section-product-info__frames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--eptd-sp-md);
}

.section-product-info__frame-card {
  background: var(--eptd-white);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  padding: var(--eptd-sp-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--eptd-trans), box-shadow var(--eptd-trans);
}

.section-product-info__frame-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--eptd-shadow-md);
}

.section-product-info__frame-name {
  font-family: var(--eptd-font-ui);
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-text);
  font-size: 15px;
}

.section-product-info__frame-price {
  font-family: var(--eptd-font-body);
  color: var(--eptd-rojo);
  font-weight: var(--eptd-fw-bold);
  font-size: 16px;
}


/* ────────────────────────────────────────────────────────
   SECTION TITLE (catálogo) en producto — variante "Otras ocasiones"
   ──────────────────────────────────────────────────────── */
body.eptd-single-producto .section-catalog__title {
  font-size: 28px;
}


/* ────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-product-hero__price-amount { font-size: 32px; }
  .section-product-funnel { padding: 48px 0; }
  .section-product-info { padding: 48px 0; }
  .section-product-info__pricing { padding: var(--eptd-sp-md); }
}

/* (7-10, Fran) «Personaliza tu portada»: menos aire entre el funnel y las secciones de debajo (y entre ellas).
   El funnel conserva su sitio; las secciones por bloques y las de siempre bajan de 80 px a 56 px de aire.
   En el móvil manda la regla general de eptd-home.css (48 px). */
.eptd-generica-funnel { --eptd-section-py: 56px; }
.eptd-generica-funnel .section-product-funnel { padding-bottom: var(--eptd-sp-lg); }
.eptd-generica-funnel .section-catalog,
.eptd-generica-funnel .section-regalo { padding-top: var(--eptd-sp-xl); padding-bottom: var(--eptd-sp-xl); }

/* ===== sections/batch-G-carrito.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH G — Carrito
   Hereda los tokens de eptd-home.css. Se encola solo: functions.php
   carga por glob todos los assets/css/sections/batch-*.css.
   ════════════════════════════════════════════════════════ */

.section-carrito {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
  background: var(--eptd-white);
}
.section-carrito__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
}
.section-carrito__title {
  margin: 0 0 var(--eptd-sp-lg);
  text-align: center;
}

/* ─── Estado vacío ───
   Antes salía oculto y lo mostraba jQuery al terminar de cargar, así que
   parpadeaba. Ahora lo decide el servidor y además ofrece una salida. */
.section-carrito__vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eptd-sp-sm);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  background: var(--eptd-cream);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius, 6px);
}
.section-carrito__vacio-img {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}
.section-carrito__vacio-texto {
  margin: 0;
  font-family: var(--eptd-font-title);
  font-size: var(--eptd-fs-h3);
  color: var(--eptd-text);
}
.section-carrito__vacio-sub {
  margin: 0 0 var(--eptd-sp-sm);
  color: var(--eptd-text-muted);
  font-size: var(--eptd-fs-small);
  line-height: 1.6;
}

/* ─── Con artículos ─── */
.section-carrito__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--eptd-grid-gap);
  align-items: start;
}
.section-carrito__resumen {
  position: sticky;
  top: calc(100px + var(--eptd-sp-md));
}
.section-carrito__seguir {
  display: inline-block;
  margin-top: var(--eptd-sp-md);
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  text-decoration: none;
}
.section-carrito__seguir:hover {
  color: var(--eptd-rojo-hover);
  text-decoration: underline;
}

@media (max-width: 1099px) {
  .section-carrito__resumen {
    position: static;
  }
}

@media (max-width: 767px) {
  .section-carrito {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .section-carrito__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== sections/batch-H-paginas.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH H — Páginas de texto y resultados de búsqueda
   Para templates/template-normal.php (contacto, conócenos) y search.php.
   Hereda los tokens de eptd-home.css. Lo encola solo el glob de functions.php.
   ════════════════════════════════════════════════════════ */

/* ─── Encabezado de página ───
   Sustituye al bloque anterior, que sin imagen destacada medía cero píxeles
   de alto y llevaba dentro un título vacío. */
.section-pagina__head {
  padding: var(--eptd-sp-xl) var(--eptd-sp-md) var(--eptd-sp-lg);
  background: var(--eptd-cream);
  text-align: center;
}
.section-pagina__head.has-img {
  background-size: cover;
  background-position: center;
  position: relative;
  padding: calc(var(--eptd-sp-xl) * 1.5) var(--eptd-sp-md);
}
.section-pagina__head.has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.section-pagina__title {
  position: relative;
  margin: 0;
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h2);
  line-height: 1.15;
  color: var(--eptd-rojo);
  text-wrap: balance;
}
.section-pagina__head.has-img .section-pagina__title {
  color: var(--eptd-white);
}
.section-pagina__sub {
  position: relative;
  margin: var(--eptd-sp-xs) 0 0;
  color: var(--eptd-text-muted);
  font-size: var(--eptd-fs-small);
}
.section-pagina__head.has-img .section-pagina__sub {
  color: var(--eptd-white);
}

/* ─── Cuerpo de una página de texto ───
   Ancho de lectura acotado: el contenido ocupaba todo el ancho disponible. */
.section-pagina {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-pagina__inner {
  max-width: 760px;
  margin: 0 auto;
}
.section-pagina__contenido {
  line-height: 1.7;
}
.section-pagina__contenido h2,
.section-pagina__contenido h3 {
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  color: var(--eptd-rojo);
  margin: var(--eptd-sp-lg) 0 var(--eptd-sp-sm);
}
.section-pagina__contenido h2 { font-size: var(--eptd-fs-h3); }
.section-pagina__contenido h3 { font-size: 1.15rem; }
.section-pagina__contenido p { margin: 0 0 var(--eptd-sp-sm); }
.section-pagina__contenido a { color: var(--eptd-rojo); text-decoration: underline; }
.section-pagina__contenido a:hover { color: var(--eptd-rojo-hover); }
.section-pagina__contenido img { max-width: 100%; height: auto; }

/* Las páginas legales las escribe el cliente en el editor y traen tablas con anchos fijos
   (la de cookies tiene cuatro, la mayor de 498 px). A 400 px eso empujaba TODA la página
   hacia la derecha: el documento medía 522 px de ancho y se podía arrastrar en horizontal.
   La tabla pasa a ser su propio contenedor con scroll, que es lo único que no rompe una
   tabla de datos; las URLs larguísimas de esas mismas páginas también se parten. */
.section-pagina__contenido {
  overflow-wrap: break-word;
}
.section-pagina__contenido table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Resultados de búsqueda ─── */
.section-busqueda {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-busqueda__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--eptd-grid-gap);
  align-items: start;
}

/* Estado sin resultados: antes no se imprimía nada y la página quedaba vacía. */
.section-busqueda__vacio {
  padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  background: var(--eptd-cream);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  text-align: center;
}
.section-busqueda__vacio-texto {
  margin: 0 0 var(--eptd-sp-xs);
  font-family: var(--eptd-font-title);
  font-size: var(--eptd-fs-h3);
  color: var(--eptd-text);
}
.section-busqueda__vacio-sub {
  margin: 0 auto var(--eptd-sp-md);
  max-width: 46ch;
  color: var(--eptd-text-muted);
  font-size: var(--eptd-fs-small);
  line-height: 1.6;
}
.section-busqueda__vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--eptd-sp-md);
}
.section-busqueda__vacio-link {
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  text-decoration: underline;
}
.section-busqueda__vacio-link:hover { color: var(--eptd-rojo-hover); }

/* Etiqueta solo para lectores de pantalla (la usa el buscador del blog). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1099px) {
  .section-busqueda__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .section-pagina,
  .section-busqueda { padding: var(--eptd-sp-xl) var(--eptd-sp-md); }
  .section-pagina__head { padding: var(--eptd-sp-lg) var(--eptd-sp-md); }
  .section-pagina__title { font-size: 1.6rem; }
}

/* ─── Listado del blog y entrada ───
   Antes el blog y las entradas tomaban sus estilos de css/style.css, pensados
   para la maquetación antigua. Ahora comparten la rejilla de resultados y solo
   necesitan lo propio de la entrada. */
.posts .post-lista {
  padding-bottom: var(--eptd-sp-lg);
  margin-bottom: var(--eptd-sp-lg);
  border-bottom: 1px solid var(--eptd-border);
}
.posts .post-lista:last-child {
  border-bottom: 0;
}
.posts .post-lista h3 {
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h3);
  line-height: 1.25;
  margin: 0 0 var(--eptd-sp-xs);
  text-wrap: balance;
}
.posts .post-lista h3 a {
  color: var(--eptd-rojo);
  text-decoration: none;
}
.posts .post-lista h3 a:hover {
  color: var(--eptd-rojo-hover);
  text-decoration: underline;
}
.posts .post-lista .imagen-destacada img {
  width: 100%;
  height: auto;
  border-radius: var(--eptd-radius-card);
  margin-bottom: var(--eptd-sp-sm);
}
/* LA IMAGEN DEL LISTADO SE ESTIRABA (isla blog-en-el-constructor, 6-10-2026): una foto de 4:3 se pintaba a 752 × 1500.
   Tres piezas, ninguna de aquí:
   1. el tema padre le quita `width` y `height` a toda imagen destacada (theme-base/functions.php,
      remove_thumbnail_dimensions, enganchado a `post_thumbnail_html`);
   2. el listado la pide con carga perezosa (partials/blog/noticia_lista.php) y WordPress, a las perezosas, les pone
      `sizes="auto, …"`. Con eso el navegador deja de usar el tamaño natural de la imagen para colocarla, y WordPress le
      da de reserva 3000 × 1500 px (`contain-intrinsic-size`, en línea en el <head>);
   3. sin `width` ni `height`, el «alto automático» de arriba sale de esos 1500 px.
   Desde el CSS no se le puede devolver su proporción natural (el navegador no la usa), así que aquí se le da una caja
   de 3:2 y la foto se RECORTA dentro, sin deformarse. La de una entrada (.post-completo) no lo necesita: va con carga
   inmediata, WordPress no le pone «auto» y sale con su proporción. Los bloques del blog (batch-J-blog.css) no pasan por
   esto: pintan la imagen con su ancho y su alto. */
.posts .post-lista:not(.post-completo) .imagen-destacada img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.posts .post-lista .descripcion {
  color: var(--eptd-text);
  line-height: 1.65;
}
.posts .post-lista .info-aux {
  margin-top: var(--eptd-sp-sm);
  font-size: var(--eptd-fs-small);
}
.posts .post-lista .info-aux .post-auxiliar {
  color: var(--eptd-text-soft);
}
/* «LEER MÁS» NO SE LEÍA: rojo sobre rojo (isla blog-en-el-constructor, 6-10-2026; medido: letra rgb(166, 29, 36) sobre
   fondo rgb(167, 25, 35)). css/style.css (.post-lista .info-aux a, hacia la línea 2195) lo pinta como el botón de 2015
   —fondo #A71923, letra blanca, centrada en una caja del 40 % del ancho— y esta regla le cambió la letra a rojo sin
   quitarle el fondo. Es un enlace de texto, como dice el resto de la regla: fuera el fondo (también el de :hover, que
   style.css oscurece) y el texto a la izquierda, alineado con el extracto, en vez de centrado en la caja del botón.
   44 px de alto para el dedo. El HTML no cambia. */
.posts .post-lista .info-aux a {
  background: none;
  width: auto;
  padding: 11px 0;
  line-height: 22px;
  text-align: left;
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-ui);
  font-weight: var(--eptd-fw-bold);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.posts .post-lista .info-aux a:hover {
  background: none;
  text-decoration: underline;
}

.post-completo h1 {
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h2);
  line-height: 1.15;
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-xs);
  text-wrap: balance;
}
.post-completo .info-aux--cabecera {
  margin: 0 0 var(--eptd-sp-md);
  color: var(--eptd-text-soft);
  font-size: var(--eptd-fs-small);
}

.section-entrada__migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eptd-sp-xs);
  margin-bottom: var(--eptd-sp-md);
  font-size: var(--eptd-fs-small);
  color: var(--eptd-text-soft);
}
.section-entrada__migas a {
  color: var(--eptd-text-muted);
  text-decoration: none;
}
.section-entrada__migas a:hover {
  color: var(--eptd-rojo);
  text-decoration: underline;
}

/* Lateral del blog: encaja con la rejilla nueva. */
.section-busqueda__aside .blog-aside {
  position: sticky;
  top: calc(100px + var(--eptd-sp-md));
}
@media (max-width: 1099px) {
  .section-busqueda__aside .blog-aside { position: static; }
}

/* Paginación: existía la función pero nunca se llegaba a pintar. */
.pagination .page-item .page-link,
.pagination li a,
.pagination li span {
  color: var(--eptd-rojo);
  border-color: var(--eptd-border);
}
.pagination .active .page-link,
.pagination li.active a,
.pagination li.active span {
  background: var(--eptd-rojo);
  border-color: var(--eptd-rojo);
  color: var(--eptd-white);
}

/* ─── Contacto ───
   La página estaba maquetada con Page Builder y el formulario era un atajo de
   Contact Form 7. Sin esos plugins se veía la tramoya y los datos en texto
   plano. Ahora tiene su propio diseño y su propio formulario. */
.section-contacto {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-contacto__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: calc(var(--eptd-grid-gap) * 1.6);
  align-items: start;
}
.section-contacto__h2 {
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h3);
  color: var(--eptd-rojo);
  margin: 0 0 var(--eptd-sp-md);
}

.form-contacto-eptd {
  display: flex;
  flex-direction: column;
  gap: var(--eptd-sp-md);
}
.form-contacto-eptd__dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eptd-sp-md);
}
.form-contacto-eptd__fila {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-contacto-eptd label {
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-text);
}
.form-contacto-eptd input[type="text"],
.form-contacto-eptd input[type="email"],
.form-contacto-eptd input[type="tel"],
.form-contacto-eptd textarea {
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-body);
  color: var(--eptd-text);
  background: var(--eptd-white);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color var(--eptd-trans), box-shadow var(--eptd-trans);
}
.form-contacto-eptd input:focus,
.form-contacto-eptd textarea:focus {
  outline: none;
  border-color: var(--eptd-rojo);
  box-shadow: 0 0 0 3px rgba(166, 29, 36, 0.12);
}
.form-contacto-eptd textarea {
  resize: vertical;
  min-height: 8rem;
}
.form-contacto-eptd__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: var(--eptd-fw-regular);
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-small);
  color: var(--eptd-text-muted);
  line-height: 1.5;
}
.form-contacto-eptd__consent input {
  margin-top: 0.15rem;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--eptd-rojo);
}
.form-contacto-eptd__consent a { color: var(--eptd-rojo); }
.form-contacto-eptd .eptd-btn { align-self: flex-start; }

/* Señuelo antispam: fuera de la vista, pero accesible para quien rellena
   formularios a ciegas, que es justo lo que hace un robot. */
.form-contacto-eptd__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.section-contacto__aviso {
  padding: var(--eptd-sp-sm) var(--eptd-sp-md);
  border-radius: var(--eptd-radius-md);
  margin: 0 0 var(--eptd-sp-md);
  font-size: var(--eptd-fs-small);
  line-height: 1.6;
}
.section-contacto__aviso p { margin: 0 0 0.35rem; }
.section-contacto__aviso p:last-child { margin: 0; }
.section-contacto__aviso--ok {
  background: #E1EFE5;
  color: #245536;
  border: 1px solid #A8CDB5;
}
.section-contacto__aviso--error {
  background: #F7E4E4;
  color: var(--eptd-rojo-dark);
  border: 1px solid #D9A7A7;
}

/* Tarjeta con los datos, todos pulsables. */
/* (7-10) Contacto sin formulario: la columna de datos va sola, centrada y a un ancho de lectura. */
.section-contacto__datos--solo {
  grid-column: 1 / -1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.section-contacto__datos {
  background: var(--eptd-cream);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
  padding: var(--eptd-sp-lg) var(--eptd-sp-md);
}
.datos-contacto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eptd-sp-md);
}
.datos-contacto__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.datos-contacto__et {
  font-family: var(--eptd-font-ui);
  font-size: 0.7rem;
  font-weight: var(--eptd-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eptd-text-soft);
}
.datos-contacto__item a {
  color: var(--eptd-rojo);
  text-decoration: none;
  font-weight: var(--eptd-fw-medium);
}
.datos-contacto__item a:hover { text-decoration: underline; }
.datos-contacto__item a:focus-visible {
  outline: 3px solid var(--eptd-rojo);
  outline-offset: 2px;
}
.section-contacto__pie {
  margin: var(--eptd-sp-lg) 0 0;
  padding-top: var(--eptd-sp-md);
  border-top: 1px solid var(--eptd-border);
  font-size: var(--eptd-fs-small);
  color: var(--eptd-text-muted);
}
.section-contacto__pie a { color: var(--eptd-rojo); }

/* ─── Preguntas frecuentes: acordeón ───
   Eran cuatro pantallas de texto corrido. <details> es nativo: funciona con
   teclado y sin JavaScript. */
.section-faq {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-faq__inner {
  max-width: 820px;
  margin: 0 auto;
}
.section-faq__lista {
  border-top: 1px solid var(--eptd-border);
}
.faq-item {
  border-bottom: 1px solid var(--eptd-border);
}
.faq-item__pregunta {
  display: flex;
  align-items: flex-start;
  gap: var(--eptd-sp-sm);
  padding: var(--eptd-sp-md) 2.5rem var(--eptd-sp-md) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--eptd-font-ui);
  font-size: 1.02rem;
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-text);
  line-height: 1.4;
  transition: color var(--eptd-trans);
}
.faq-item__pregunta::-webkit-details-marker { display: none; }
/* El rojo al pasar por encima, solo con un ratón de verdad (isla home-por-bloques, 6-10-2026): en un teléfono la
   pregunta se quedaba en rojo después de tocarla, abierta o cerrada. */
@media (hover: hover) and (pointer: fine) {
  .faq-item__pregunta:hover { color: var(--eptd-rojo); }
}
.faq-item__pregunta:focus-visible {
  outline: 3px solid var(--eptd-rojo);
  outline-offset: -3px;
}
/* El signo que abre y cierra: una cruz que gira hasta convertirse en menos. */
.faq-item__pregunta::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--eptd-rojo);
  transform: translateY(-50%);
}
.faq-item__pregunta::before {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--eptd-rojo);
  transform: translateY(-50%) rotate(90deg);
  transition: transform var(--eptd-trans), opacity var(--eptd-trans);
}
.faq-item[open] .faq-item__pregunta::before {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.faq-item__respuesta {
  padding: 0 2.5rem var(--eptd-sp-md) 0;
  color: var(--eptd-text-muted);
  line-height: 1.7;
}
.faq-item__respuesta p { margin: 0 0 var(--eptd-sp-sm); }
.faq-item__respuesta p:last-child { margin: 0; }
.faq-item__respuesta a { color: var(--eptd-rojo); }
.faq-item__respuesta em { color: var(--eptd-text); }

.section-faq__ayuda {
  margin-top: var(--eptd-sp-xl);
  padding: var(--eptd-sp-lg) var(--eptd-sp-md);
  background: var(--eptd-cream);
  border-radius: var(--eptd-radius-md);
  text-align: center;
}
.section-faq__ayuda-texto {
  margin: 0 0 var(--eptd-sp-md);
  font-family: var(--eptd-font-title);
  font-size: var(--eptd-fs-h3);
  color: var(--eptd-text);
}
.section-faq__ayuda-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--eptd-sp-md);
}

@media (max-width: 1099px) {
  .section-contacto__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .section-contacto,
  .section-faq { padding: var(--eptd-sp-xl) var(--eptd-sp-md); }
  .form-contacto-eptd__dos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__pregunta,
  .faq-item__pregunta::before { transition: none; }
}

/* ─── Tratamiento editorial de las páginas de texto ───
   Quiénes somos, Conócenos y las cinco legales eran un bloque de texto sin
   jerarquía. La entradilla entra más grande, las negritas del editor se
   apoyan en el rojo de marca y las listas respiran. */
.section-pagina__contenido > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--eptd-text);
}
.section-pagina__contenido strong {
  color: var(--eptd-text);
  font-weight: var(--eptd-fw-bold);
}
.section-pagina__contenido > p:first-of-type strong {
  color: var(--eptd-rojo);
}
.section-pagina__contenido ul,
.section-pagina__contenido ol {
  margin: 0 0 var(--eptd-sp-md);
  padding-left: 1.25rem;
}
.section-pagina__contenido li {
  margin: 0 0 0.4rem;
}
.section-pagina__contenido em u {
  text-decoration: none;
  display: inline-block;
  margin-top: var(--eptd-sp-xs);
  font-style: normal;
  font-family: var(--eptd-font-ui);
  font-size: 0.72rem;
  font-weight: var(--eptd-fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eptd-text-soft);
}
.section-pagina__contenido blockquote {
  margin: var(--eptd-sp-lg) 0;
  padding: var(--eptd-sp-md) var(--eptd-sp-lg);
  background: var(--eptd-cream);
  border-left: 3px solid var(--eptd-rojo);
  border-radius: 0 var(--eptd-radius-md) var(--eptd-radius-md) 0;
  font-family: var(--eptd-font-title);
  font-size: 1.1rem;
  color: var(--eptd-text);
}
.section-pagina__contenido hr {
  border: 0;
  border-top: 1px solid var(--eptd-border);
  margin: var(--eptd-sp-lg) 0;
}
.section-pagina__contenido table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--eptd-sp-md);
  font-size: var(--eptd-fs-small);
}
.section-pagina__contenido th,
.section-pagina__contenido td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--eptd-border);
}
.section-pagina__contenido th {
  background: var(--eptd-cream);
  font-family: var(--eptd-font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eptd-text-muted);
}

/* ===== sections/batch-I-bloques.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH I · Bloques del constructor de páginas (isla constructor-paginas, 27-09-2026)

   CÓMO LLEGA A LA PÁGINA (dependencia implícita, apuntada aquí a propósito):
   este fichero NO se encola por su nombre en ningún sitio. Lo encola el glob
   `assets/css/sections/batch-*.css` de functions.php (hacia la línea 506,
   dentro de add_action('wp_enqueue_scripts' …, 30)), SOLO en las páginas
   del rediseño (eptd_is_redesign_page(), que incluye toda is_page() salvo las
   de compra). Si se renombra sin el prefijo «batch-», deja de cargarse sin
   avisar. Depende de 'eptd-home-master' (los tokens de eptd-home.css).

   QUÉ HAY: solo lo que los bloques nuevos necesitan y el rediseño aún no
   tiene. Celebraciones, Formatos, Listo para regalar, Reseñas y Llamada con
   imagen se pintan con las clases de la página de inicio; Preguntas y los
   bloques de texto, con las de batch-H-paginas.css. Sin una regla duplicada.

   Sin h1: el h1 es el título de la página (partials/pagina_texto.php).
   Marcado: periodicov3/partials/bloques/*.php.
   ════════════════════════════════════════════════════════ */

/* Dos bloques de lectura seguidos no suman dos rellenos de sección. */
.eptd-bq--lectura + .eptd-bq--lectura { padding-top: 0; }

/* Botón */
.eptd-bq-boton {
  display: flex;
  justify-content: center;
  padding: var(--eptd-sp-lg) var(--eptd-sp-md);
}

/* Imagen */
.eptd-bq-imagen { margin: 0 auto; padding: var(--eptd-sp-lg) var(--eptd-sp-md); box-sizing: border-box; }
.eptd-bq-imagen--lectura { max-width: calc(760px + 2 * var(--eptd-sp-md)); }
.eptd-bq-imagen--completo { max-width: none; padding-left: 0; padding-right: 0; }
.eptd-bq-imagen img { display: block; width: 100%; height: auto; border-radius: var(--eptd-radius-md); }
.eptd-bq-imagen--completo img { border-radius: 0; }
.eptd-bq-imagen figcaption {
  margin-top: var(--eptd-sp-xs);
  padding: 0 var(--eptd-sp-md);
  color: var(--eptd-text-muted);
  font-size: var(--eptd-fs-small);
  text-align: center;
}

/* Preguntas: el acordeón es el de batch-H (.section-faq / .faq-item); aquí solo el título del bloque. */
.eptd-bq-faq__titulo { text-align: center; margin: 0 0 var(--eptd-sp-lg); }

/* Texto con formato (isla personalizar-orden, 30-09). La lista corta del plugin (saneado.php) solo deja estas dos
   cosas nuevas con forma propia; las tablas ya las pinta batch-H (desplazamiento propio a 400 px).
   · Titular con acento: h3/h4 con la clase `eptd-acento`, en el rojo de la marca. El color va por clase, nunca por
     `style`: si mañana cambia el rojo, cambia aquí y en todas las páginas a la vez.
   · Resaltado (`mark`): un fondo suave del mismo rojo, sin cambiar el color del texto (se sigue leyendo igual). */
.section-pagina__contenido h3.eptd-acento,
.section-pagina__contenido h4.eptd-acento {
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-title);
}
.section-pagina__contenido mark {
  background: rgba(166, 29, 36, 0.12);
  color: inherit;
  padding: 0 0.15em;
  border-radius: 2px;
}

/* ─── Cabecera, pie y bloques comunes hechos con bloques (isla personalizar-orden, 30-09) ───
   Solo salen si hay un diseño publicado en EPTD › Personalizar › Cabecera, pie y bloques comunes; si no, la cabecera y
   el pie son los de siempre (header_eptd.php, footer_eptd.php) y nada de esto se usa. Las columnas del pie reutilizan
   las clases del pie de siempre (batch-E: .section-footer__col, __title, __list, __social, __bottom). */
.eptd-pie__rejilla { padding-top: var(--eptd-sp-xl); }
.eptd-pie__rejilla > .eptd-bq-pie--ancho { grid-column: 1 / -1; }
.eptd-pie__rejilla > .section-footer__bottom { margin-bottom: calc(-1 * var(--eptd-sp-xl)); }
.eptd-bq-pie--texto { color: var(--eptd-white); font-size: 0.9rem; line-height: 1.6; }
.eptd-bq-pie--texto p { margin: 0 0 0.5rem; }
.eptd-bq-pie--texto a { color: var(--eptd-white); text-decoration: underline; }
.eptd-bq-pie--texto h3, .eptd-bq-pie--texto h4, .eptd-bq-pie--texto strong { color: var(--eptd-white); }
.eptd-bq-pie--texto mark { background: rgba(255, 255, 255, 0.22); color: inherit; padding: 0 0.15em; border-radius: 2px; }

/* La franja de encima de la cabecera (un «Texto» o un «Botón» en un diseño de cabecera). */
.eptd-zona--franja { background: var(--eptd-cream); border-bottom: 1px solid var(--eptd-border); }
.eptd-franja { max-width: 1280px; margin: 0 auto; padding: 0.5rem var(--eptd-sp-md); display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem;
  justify-content: center; align-items: baseline; text-align: center; font-size: 0.9rem; color: var(--eptd-text); }
.eptd-franja p { margin: 0; }
.eptd-franja a { color: var(--eptd-rojo); }
.eptd-franja__tit { color: var(--eptd-rojo); }
.eptd-franja__boton { font-weight: var(--eptd-fw-bold); text-decoration: underline; }

/* WhatsApp: el bloque (centrado). Verde de WhatsApp: es su marca, no la nuestra. (El botón flotante de la esquina se quitó el 7-10-2026.) */
.eptd-wa-caja { display: flex; justify-content: center; padding: var(--eptd-sp-md); }
.eptd-wa {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.2rem 0.7rem 0.9rem;
  border-radius: 999px; background: #25d366; color: #fff; font-weight: var(--eptd-fw-bold); text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); transition: transform 160ms ease-out;
}
.eptd-wa:active { transform: scale(0.97); }
.eptd-wa svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.eptd-wa--icono { width: 56px; height: 56px; padding: 0; justify-content: center; }
.eptd-wa--icono svg { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) { .eptd-wa:hover { color: #fff; background: #1ebe5b; } }
/* Es un <details>: el botón es su <summary> y, al pulsarlo, se abre el panel legal (como el «opt-in» de la web vieja). */
.eptd-wa-caja { position: relative; flex-direction: column; align-items: center; }
.eptd-wa-caja > summary { list-style: none; cursor: pointer; }
.eptd-wa-caja > summary::-webkit-details-marker { display: none; }
.eptd-wa-caja > summary:focus-visible { outline: 3px solid var(--eptd-rojo); outline-offset: 3px; }
.eptd-wa-panel {
  width: min(320px, calc(100vw - 32px)); margin-top: 0.6rem; padding: 0.9rem 1rem; box-sizing: border-box;
  background: #fff; color: var(--eptd-text); border: 1px solid var(--eptd-border); border-radius: var(--eptd-radius-md);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.45); font-size: 0.82rem; line-height: 1.5; text-align: left;
  /* Sale de su botón con un ease-out fuerte; se cierra al instante (es un <details>). El botón está ENCIMA y centrado
     (.eptd-wa-caja apila en columna): el panel crece desde arriba y desde el centro. Hasta el 13-10-2026 decía
     `bottom right`, que era el origen del botón flotante de la esquina, quitado el 7-10. */
  transform-origin: top center; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style { .eptd-wa-caja[open] .eptd-wa-panel { opacity: 0; transform: scale(0.97); } }
.eptd-wa-panel__legal { margin: 0 0 0.6rem; white-space: pre-line; }
.eptd-wa-panel__legal a, .eptd-wa-panel__acepta a { color: var(--eptd-rojo); }
.eptd-wa-panel__acepta { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 0.7rem; cursor: pointer; }
.eptd-wa-panel__acepta input { margin-top: 0.2rem; accent-color: #25d366; }
.eptd-wa-panel__ir {
  display: flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 999px;
  background: #25d366; color: #fff; font-weight: var(--eptd-fw-bold); text-decoration: none;
  transition: transform 160ms ease-out, opacity 160ms ease-out;
}
.eptd-wa-panel__ir:active { transform: scale(0.97); }
.eptd-wa-panel__ir[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.eptd-wa-panel__ir:hover, .eptd-wa-panel__ir:focus { color: #fff; }
@media (prefers-reduced-motion: reduce) { .eptd-wa, .eptd-wa-panel, .eptd-wa-panel__ir { transition: none; } }

/* ── «Contacto» en una página (isla contacto-por-bloques, 13-10-2026) ─────────────────────────────
   La tarjeta es la de la página de Contacto de siempre y se pinta con SUS clases (batch-H-paginas.css, «Contacto»:
   .section-contacto, .section-contacto__datos, .datos-contacto…): aquí no se repite ninguna. Solo va lo que es del
   BLOQUE, bajo `.eptd-bq-contacto` (la pone partials/bloques/contacto-pagina.php), para no mover ni un píxel del
   camino de siempre de page-contacto.php, que usa esas mismas clases. En el pie el bloque es una columna más
   (.section-footer__col) y no necesita nada.

   1 · La tarjeta y lo que la sigue (el botón de WhatsApp, un texto) se leen como un grupo, no como tres secciones
       con su relleno entero: quedan a 2 rem una de otra (medido: 32-33 px, pruebas/medir-tarjeta.py de la isla). Con
       :has(); un navegador que no lo entienda deja el aire de una sección, que es lo que había. */
.eptd-bq-contacto:has(+ .eptd-wa-caja),
.eptd-bq-contacto:has(+ .eptd-bq--lectura) { padding-bottom: var(--eptd-sp-xs); }
.eptd-bq-contacto + .eptd-bq--lectura { padding-top: var(--eptd-sp-md); }
/* (Detrás del primer botón de WhatsApp de la página va su <script>: partials/bloques/whatsapp.php. Por eso las dos formas.) */
.eptd-bq-contacto + .eptd-wa-caja + .eptd-bq--lectura,
.eptd-bq-contacto + .eptd-wa-caja + script + .eptd-bq--lectura { padding-top: var(--eptd-sp-xs); }
/* …y ese texto se alinea con la tarjeta: su columna mide lo que ella (640 px, el ancho de .section-contacto__datos--solo)
   y no los 760 de lectura, para que no empiece más a la izquierda que la tarjeta que tiene encima. */
.eptd-bq-contacto + .eptd-bq--lectura .section-pagina__inner,
.eptd-bq-contacto + .eptd-wa-caja + .eptd-bq--lectura .section-pagina__inner,
.eptd-bq-contacto + .eptd-wa-caja + script + .eptd-bq--lectura .section-pagina__inner { max-width: 640px; }
/* 2 · Sus enlaces (llamar, escribir, abrir el mapa) se pulsan con el dedo: la zona de toque crece de 26 a 42 px sin
       mover nada (el relleno y el margen negativo se anulan), y responden al instante al pulsarlos. El subrayado al
       pasar por encima, solo donde hay ratón: en un teléfono se quedaba puesto después de tocar. */
.eptd-bq-contacto .datos-contacto__item a { padding-block: 0.5rem; margin-block: -0.5rem; }
.eptd-bq-contacto .datos-contacto__item a:active { opacity: 0.6; }
@media (hover: none) { .eptd-bq-contacto .datos-contacto__item a:hover { text-decoration: none; } }

/* ── Reseñas: lo que viene de Google (isla reseñas-seo, 30-09) ──────────────────────────────────────
   Las tarjetas son las de la página de inicio (.review-card, batch-D.css). Aquí solo lo que pide Google
   (políticas de Places API): «Google Maps» como texto de atribución con su estilo fijo (Roboto o la sans
   de la web, 400, gris #5E5E5E, 12–16 px, sin partir) y lo de Google separado a la vista de lo demás
   (recuadro con fondo propio). Sin animaciones: las tarjetas de Google no se pulsan enteras, así que
   tampoco se levantan al pasar el ratón (solo sus enlaces responden). */
.eptd-gmaps {
  font-family: Roboto, var(--eptd-font-ui);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  white-space: nowrap;
  color: #5E5E5E;
  text-decoration: none;
}
a.eptd-gmaps:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Solo la nota (sin reseñas de Google): la píldora bajo el título, con borde para que se vea que es aparte. */
.eptd-bq-nota {
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.4rem 1rem;
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-pill);
}

/* El bloque apila sus piezas (título, recuadro de Google, botón, copiadas) con un solo espaciado, en columna: así
   «Ver menos» puede irse al final con `order` cuando se abre (ver «Cargar más», abajo). */
.eptd-bq .section-reviews__inner { display: flex; flex-direction: column; gap: var(--eptd-sp-lg); }
.eptd-bq .section-reviews__head { margin-bottom: 0; }

/* El recuadro de Google: fondo propio, la atribución arriba, el orden y el enlace a la ficha abajo. */
.eptd-bq-google {
  padding: var(--eptd-sp-md);
  background: var(--eptd-bg-alt);
  border-radius: var(--eptd-radius-md);
}
.eptd-bq-google__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: var(--eptd-sp-md);
}
.eptd-bq-google__marca {
  margin: 0;
  font-family: Roboto, var(--eptd-font-ui);
  font-size: 14px;
  color: #5E5E5E;
}
.eptd-bq-google__nota {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--eptd-font-ui);
  color: var(--eptd-text);
}
.eptd-bq-google__media { font-weight: 800; font-size: 1.25rem; }
.eptd-bq-google__estrellas { color: var(--eptd-star); font-size: 1.05rem; letter-spacing: 2px; }
.eptd-bq-google__total { color: var(--eptd-text-muted); font-size: 0.9rem; }
.eptd-bq-google__lista { list-style: none; margin: 0; padding: 0; }

.review-card--google:hover { transform: none; box-shadow: var(--eptd-shadow-sm); }
/* !important: eptd-home.css («GLOBAL: IMAGE BORDER-RADIUS», main.eptd-home .eptd-section img:not(…)) pone a toda
   imagen de sección radio de tarjeta y height:auto, con más especificidad que esta clase. La foto del autor es redonda. */
.review-card__foto {
  width: 44px;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--eptd-bg-formats);
}
a.review-card__name { text-decoration: none; }
a.review-card__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.review-card--google .review-card__text {
  white-space: pre-line;                 /* los párrafos que escribió la persona */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;                 /* entera, en «Leerla en Google Maps» */
  line-clamp: 8;
  overflow: hidden;
}
.review-card__fuente {
  margin: auto 0 0;
  padding-top: 0.25rem;
  font-family: var(--eptd-font-ui);
  font-size: 0.8125rem;
  color: #5E5E5E;
}
.review-card__fuente a,
.eptd-bq-google__pie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.eptd-bq-google__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: var(--eptd-sp-md) 0 0;
  font-family: var(--eptd-font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #5E5E5E;
}
.eptd-bq-google__pie p { margin: 0; max-width: 72ch; }
.eptd-bq-google__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.eptd-bq-google__pie .eptd-bq-google__todas {
  font-weight: 700;
  color: var(--eptd-rojo);
  white-space: nowrap;
}
.eptd-bq-google a:focus-visible,
.eptd-bq-nota a:focus-visible { outline: 2px solid var(--eptd-rojo); outline-offset: 2px; border-radius: 2px; }

/* «Cargar más reseñas» sin JavaScript: un <details> vacío; su [open] enseña, con :has(), las reseñas del MISMO bloque
   que pasan de «Cuántas se ven al principio» (.eptd-bq-oculta, las marca la partial). Sin :has() (navegadores de antes
   de 2023) se quedan las del principio y «Ver todas en Google Maps». Cerrado, el botón va justo tras lo último que se
   ve; abierto («Ver menos»), al final de todo (order). Se usa pocas veces por visita: lo que aparece entra con un
   fundido corto; cerrar es instantáneo. */
.eptd-bq .eptd-bq-oculta { display: none; }
.eptd-bq:has(.eptd-bq-mas[open]) .eptd-bq-oculta {
  display: flex;
  animation: eptd-bq-aparece 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Escalonado corto (40 ms) entre las que salen juntas en una misma fila; `backwards` las tiene ocultas mientras esperan. */
.eptd-bq:has(.eptd-bq-mas[open]) .eptd-bq-oculta + .eptd-bq-oculta { animation-delay: 40ms; animation-fill-mode: backwards; }
.eptd-bq:has(.eptd-bq-mas[open]) .eptd-bq-oculta + .eptd-bq-oculta + .eptd-bq-oculta { animation-delay: 80ms; }
@keyframes eptd-bq-aparece { from { opacity: 0; transform: translateY(6px); } }
.eptd-bq-mas { text-align: center; }
.eptd-bq-mas[open] { order: 1; }
.eptd-bq-mas__boton {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--eptd-rojo);
  border-radius: var(--eptd-radius-pill);
  background: var(--eptd-white);
  color: var(--eptd-rojo);
  font-family: var(--eptd-font-ui);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  user-select: none;
  transition: transform 160ms ease-out, background-color 160ms ease;
}
.eptd-bq-mas__boton::-webkit-details-marker { display: none; }
.eptd-bq-mas__boton:active { transform: scale(0.97); }
.eptd-bq-mas__boton:focus-visible { outline: 2px solid var(--eptd-rojo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .eptd-bq-mas__boton:hover { background: #fdf2f2; }
}
.eptd-bq-mas[open] .eptd-bq-mas__abrir,
.eptd-bq-mas:not([open]) .eptd-bq-mas__cerrar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .eptd-bq:has(.eptd-bq-mas[open]) .eptd-bq-oculta { animation: none; }
  .eptd-bq-mas__boton { transition: none; }
}

/* Móvil (≤ 767 px): lo demás ya apila a una columna con las reglas de la página de inicio. */
@media (max-width: 767px) {
  .eptd-bq-boton { padding: var(--eptd-sp-md); }
  .eptd-bq-boton .eptd-btn { width: 100%; }
  .eptd-bq-imagen { padding-top: var(--eptd-sp-md); padding-bottom: var(--eptd-sp-md); }
  .eptd-bq .section-reviews__inner { gap: var(--eptd-sp-md); }
  .eptd-bq-nota { border-radius: var(--eptd-radius-md); row-gap: 0.15rem; }   /* en dos líneas, una píldora se ve hinchada */
  .eptd-bq-google { padding: var(--eptd-sp-sm); }
  .eptd-bq-google__cab { margin-bottom: var(--eptd-sp-sm); }
}

/* ════════════════════════════════════════════════════════
   Portada · carrusel (isla home-por-bloques, 6-10-2026)

   El bloque «Portada» con UNA diapositiva es la sección `.section-hero` de siempre (batch-A.css) y nada de lo de
   aquí le toca: todas estas reglas cuelgan de `.section-hero--carrusel`, que solo existe con dos o más
   (partials/bloques/portada.php). Lo mueve assets/js/eptd-portada-carrusel.js.

   · Todas las diapositivas ocupan LA MISMA celda de la rejilla: cambiar de una a otra no mueve nada de la página.
     La caja de la imagen la da la primera diapositiva (su proporción, la de hoy); las demás la rellenan recortando.
     En el móvil cada diapositiva lleva titular, imagen y botón: las tres filas son comunes a todas (subgrid), así
     que un titular más largo no baja la imagen de las demás, y las flechas van centradas sobre la fila de la imagen.
   · El cambio es un fundido: la que entra aparece ENCIMA en 450 ms (ease) y la que sale se queda entera debajo hasta
     que acaba; después deja de ser visible (visibility: ni se ve ni se puede pulsar). Fondo blanco en cada una para
     que, en el móvil, el titular que entra tape al que sale en vez de mezclarse con él. Transiciones (no keyframes):
     si se pulsa otra flecha a mitad, cambia de rumbo sin saltos.
   · Solo se animan opacity y transform. Las flechas y los puntos se hunden al pulsar (scale .97, 140 ms); el realce
     al pasar el ratón, solo con ratón de verdad. Con «reducir movimiento», sin fundido y sin hundirse (y el JS no pasa
     sola).
   · Flechas y puntos solo se ven si el JS ha arrancado (`eptd-carrusel-js` en <html>): sin él se queda la primera
     diapositiva, quieta, sin botones que no harían nada.
   ════════════════════════════════════════════════════════ */
.section-hero--carrusel .section-hero__pista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;   /* titular · imagen · botón */
  touch-action: pan-y;                  /* deslizar de lado lo lee el JS; hacia arriba y abajo, la página sigue bajando */
}
.section-hero--carrusel .section-hero__diapo {
  grid-area: 1 / 1 / 4 / 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  background: var(--eptd-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear 450ms, visibility 0s linear 450ms;
}
.section-hero--carrusel .section-hero__diapo.is-activa {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 450ms ease;
}
.section-hero--carrusel .section-hero__title { grid-row: 1; align-self: end; }
.section-hero--carrusel .section-hero__diapo > picture { grid-row: 2; display: block; min-width: 0; }
.section-hero--carrusel .section-hero__cta { grid-row: 3; }
/* De la segunda en adelante, la imagen rellena la caja de la primera. !important: la regla global de eptd-home.css
   («GLOBAL: IMAGE BORDER-RADIUS») pone height:auto a toda imagen de sección con más especificidad que esta. */
.section-hero--carrusel .section-hero__diapo:not(:first-child) > picture { position: relative; overflow: hidden; }
.section-hero--carrusel .section-hero__diapo:not(:first-child) .section-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: cover;
}

.section-hero__flecha {
  grid-area: 2 / 1;
  align-self: center;
  z-index: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                          /* zona de toque */
  height: 44px;
  margin: 0 clamp(8px, 4.2vw, 60px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--eptd-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.section-hero__flecha::before {         /* el disco blanco translúcido de la captura del cliente */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--eptd-white);
  opacity: 0.72;
  transition: opacity 160ms ease;
}
.section-hero__flecha svg { position: relative; display: block; }
.section-hero__flecha--anterior { justify-self: start; }
.section-hero__flecha--siguiente { justify-self: end; }
.section-hero__flecha:active { transform: scale(0.97); }

.section-hero__puntos {
  grid-area: 2 / 1;
  align-self: end;
  justify-self: center;
  z-index: 2;
  display: flex;
}
/* Cada punto mide 8 px a la vista y 24 × 44 al dedo: 44 de alto, la zona de toque; 24 de ancho, lo que separa un punto
   del siguiente, para que las zonas de dos vecinos no se pisen. El punto va a 20 px del borde de abajo de la imagen. */
.section-hero__punto {
  position: relative;
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.section-hero__punto::before {
  content: "";
  position: absolute;
  inset: 20px 8px 16px;
  border-radius: 50%;
  background: var(--eptd-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  opacity: 0.75;
  transition: opacity 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.section-hero__punto[aria-current="true"]::before {
  background: var(--eptd-rojo);
  box-shadow: 0 0 0 1px var(--eptd-white);
  opacity: 1;
  transform: scale(1.25);
}
.section-hero__punto:active::before { transform: scale(0.97); }
/* El punto de la diapositiva que se ve ya está agrandado (1,25): al pulsarlo se hunde desde ahí (1,25 × 0,97), no hasta
   el tamaño de los demás, que sería un salto. */
.section-hero__punto[aria-current="true"]:active::before { transform: scale(1.2125); }

/* El anillo de foco, solo con teclado, es el de toda la web: css/style.css (`:focus-visible`, 2 px en rojo con un halo
   blanco), que manda sobre cualquier clase. Aquí solo se quita el contorno que el tema padre (Bootstrap) pone a todo
   botón enfocado, también al pulsarlo con el ratón. */
.section-hero__flecha:focus:not(:focus-visible),
.section-hero__punto:focus:not(:focus-visible) { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .section-hero__flecha:hover::before { opacity: 1; }
  .section-hero__punto:hover::before { opacity: 1; }
}
:root:not(.eptd-carrusel-js) .section-hero__flecha,
:root:not(.eptd-carrusel-js) .section-hero__puntos { display: none; }

/* Lo que se anuncia al cambiar de diapositiva a mano: solo para el lector de pantalla. */
.section-hero__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .section-hero--carrusel .section-hero__diapo,
  .section-hero--carrusel .section-hero__diapo.is-activa,
  .section-hero__flecha,
  .section-hero__flecha::before,
  .section-hero__punto::before { transition: none; }
  /* Y nada se mueve al pulsar: las flechas y los puntos no se hunden (el punto de la que se ve conserva su tamaño). */
  .section-hero__flecha:active,
  .section-hero__punto:active::before { transform: none; }
  .section-hero__punto[aria-current="true"]:active::before { transform: scale(1.25); }
}

/* ════════════════════════════════════════════════════════
   Portada · la diapositiva entera lleva adonde su botón (Fran, 6-10-2026)

   Una diapositiva con destino (con una sola o en carrusel) lleva `es-pulsable`, y su enlace, `section-hero__cta--pulsable`
   con el botón DENTRO (un <span class="eptd-btn …">). Es UN solo enlace por diapositiva, en cualquier tamaño:
   · Móvil (≤ 767 px): el botón se ve en su sitio de siempre y el enlace se estira sobre toda la diapositiva con un
     ::after. El ::after se coloca respecto de la diapositiva (position: relative): por eso el que se hunde al pulsar
     es el <span> de dentro y no el enlace; un transform en el enlace haría que su ::after dejara de cubrirla.
   · Ordenador y tableta: la diapositiva es solo la imagen, así que el enlace ES la imagen (la cubre) y el botón no se
     ve: queda como nombre del enlace para el lector de pantalla. El anillo de foco va por dentro del borde de la imagen.
   En reposo no se ve nada distinto de la portada de siempre.
   ════════════════════════════════════════════════════════ */
.es-pulsable { position: relative; }
.section-hero__cta--pulsable::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .section-hero__cta--pulsable {
    display: block;                     /* batch-A.css lo oculta en el ordenador (display: none): aquí es la imagen */
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
  }
  /* En el carrusel la diapositiva es una rejilla, y a un hijo con position: absolute su fila le hace de caja: sin esto
     el enlace se quedaría en la fila del botón, que en el ordenador mide cero. */
  .section-hero--carrusel .section-hero__cta--pulsable { grid-row: auto; }
  .section-hero__cta--pulsable::after { content: none; }
  .section-hero__cta--pulsable > .eptd-btn {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* El anillo de foco de la web (css/style.css) va por FUERA del elemento, y aquí el enlace es la imagen entera, a
     sangre: por fuera lo cortaría el borde de la sección (overflow: hidden) y no se vería. Se mete hacia dentro, con
     su halo blanco también por dentro. !important: aquella regla lleva un identificador y gana a cualquier clase. */
  .section-hero__cta--pulsable:focus-visible {
    outline-offset: -4px !important;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.8) !important;
  }
}
/* El botón responde a lo que se le hace al ENLACE, porque el enlace cubre la diapositiva y el puntero nunca llega al
   <span> (lo tapa el ::after). Donde el botón se ve (móvil y ventanas estrechas):
   · al pulsar la diapositiva, el botón se hunde, como cualquier botón de la web (eptd-home.css, `.eptd-btn:active`);
   · con un ratón de verdad encima, toma su color de «encima», como lo tomaba cuando el enlace era el botón.
   El `transform` va en el <span>, no en el enlace (ver arriba). Con «reducir movimiento» no se hunde. */
.section-hero__cta--pulsable:active > .eptd-btn { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .section-hero__cta--pulsable:hover > .eptd-btn-primary {
    background: var(--eptd-rojo-hover);
    border-color: var(--eptd-rojo-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero__cta--pulsable:active > .eptd-btn { transform: none; }
}

/* ════════════════════════════════════════════════════════
   Garantías y formas de pago (isla home-por-bloques, 6-10-2026)

   El bloque se pinta con las clases de la franja de la página de inicio (batch-D.css), que reparte las ventajas en
   TRES columnas porque hoy son tres. Con una, dos o cuatro, la rejilla lleva `--N` (partials/bloques/garantias.php)
   y aquí se le dan tantas columnas como ventajas. Solo donde hoy hay columnas: en el móvil van una debajo de otra,
   como siempre. Con tres no hay clase y no cambia nada.
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .section-trust__benefits--1 { grid-template-columns: minmax(0, 1fr); }
  .section-trust__benefits--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-trust__benefits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════
   Preguntas y ayuda · «¿Necesitas ayuda?» sin formulario (Fran, 6-10-2026)

   El bloque no lleva el formulario de «te llamamos»: bajo el título van un texto, si se escribe, y un botón. La caja
   roja y el título son los de la página de inicio (batch-E.css). El botón NO tiene estilo aquí: es el de la web
   (`eptd-btn eptd-btn-outline-white`, eptd-home.css) y va dentro de `…__help-action`, que no lleva ninguna regla: está
   para que el botón mida lo que su texto (la caja es una columna flexible y lo estiraría de lado a lado).
   Lo único nuevo es el texto, que hoy no existe en esa caja: letra de párrafo, en blanco, con el aire del título.
   ════════════════════════════════════════════════════════ */
.section-footer-cta__help-text {
  font-family: var(--eptd-font-body);
  font-size: var(--eptd-fs-body);
  line-height: 1.5;
  color: var(--eptd-white);
  margin: 0 0 var(--eptd-sp-md);
}

/* ===== sections/batch-J-blog.css ===== */

/* ════════════════════════════════════════════════════════
   BATCH J · El blog por bloques (isla blog-en-el-constructor, 6-10-2026)

   CÓMO LLEGA A LA PÁGINA: este fichero NO se encola por su nombre en ningún
   sitio. Lo encola el glob `assets/css/sections/batch-*.css` de functions.php,
   SOLO en las páginas del rediseño (eptd_is_redesign_page()), detrás de
   batch-H-paginas.css y batch-I-bloques.css (orden alfabético). Si se renombra
   sin el prefijo «batch-», deja de cargarse sin avisar. Depende de
   'eptd-home-master' (los tokens --eptd-* de eptd-home.css).

   QUÉ HAY: lo que pintan los dos bloques del blog y su lateral.
     partials/bloques/lista-entradas.php   .section-blog, .blog-lista, .blog-card, .blog-paginacion
     partials/bloques/entrada.php          .section-blog--entrada, .blog-migas, .blog-entrada
     partials/bloques/_lateral-blog.php    .blog-lateral, .blog-buscar
   El aviso de «no hay entradas» usa las clases .section-busqueda__vacio* de
   batch-H-paginas.css, y el texto de la entrada lleva además
   .section-pagina__contenido (titulares, enlaces y tablas, de ese mismo fichero).

   QUÉ NO HAY: nada del blog DE SIEMPRE (partials/blog_listado.php y
   partials/blog/*.php: .post-lista, .blog-aside, .form-buscador-blog). Ese
   camino sigue con sus reglas de css/style.css y de batch-H mientras el blog
   no se publique con bloques. Las clases de aquí son nuevas: no pisan ninguna.
   Una sola excepción, casi al final: la mayúscula inicial del título de una
   etiqueta, de una fecha o de un autor, que vale para los dos caminos.

   INTERACCIÓN (la misma que las tarjetas de «Celebraciones», batch-B.css):
   el «encima» solo con un ratón de verdad; al pulsar, lo pulsable se hunde un
   poco (scale 0.97, 140-160 ms, curva de salida fuerte); con «reducir
   movimiento» nada se mueve. Sin `transition: all`. Lo que se toca con el dedo
   mide 44 px o más. Sin fuentes ni iconos de fuera.

   EL AZUL DEL TEMA PADRE: css/bootstrap.min.css pone `a:hover { color: #0056b3;
   text-decoration: underline }`, que pesa más que una clase sola. Por eso cada
   enlace de aquí repite su color de reposo en :hover FUERA de la condición del
   ratón: en un teléfono el «encima» se queda puesto después de tocar.
   ════════════════════════════════════════════════════════ */

/* ─── La caja: una columna, o columna + lateral ─── */
.section-blog {
  padding: var(--eptd-section-py) var(--eptd-sp-md);
}
.section-blog__inner {
  max-width: var(--eptd-max-width);
  margin: 0 auto;
}
.section-blog--lateral .section-blog__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--eptd-sp-xl) calc(var(--eptd-grid-gap) * 1.6);
  align-items: start;
}
/* Una entrada sin lateral: ancho de lectura, como las páginas de texto. */
.section-blog--entrada:not(.section-blog--lateral) .section-blog__inner {
  max-width: 760px;
}

/* ─── La lista de entradas ─── */
.blog-lista {
  display: grid;
  gap: var(--eptd-sp-xl) var(--eptd-grid-gap);
}
.blog-lista--tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-lista--lista { grid-template-columns: minmax(0, 1fr); }

.blog-card {
  position: relative;   /* el enlace del titular se estira hasta aquí (::after) */
  display: flex;
  flex-direction: column;
  /* Un solo `transform` para levantarse (con ratón) y para hundirse al pulsar: corto y con curva de salida fuerte. */
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* La foto: SIEMPRE una caja de 3:2 con la imagen dentro, recortada (lo normal) o entera (más abajo), nunca estirada. La
   imagen llega con su ancho y su alto (la partial los escribe), así que el hueco existe antes de que cargue y la página
   no salta. */
.blog-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--eptd-sp-sm);
  background: var(--eptd-bg-alt);
  border-radius: var(--eptd-radius-card);
}
/* Los dos `!important` son a propósito: eptd-home.css (hacia la línea 125) le pone `height: auto` a TODA imagen que esté
   dentro de un <section> de la web, con un selector de mucho más peso que una clase
   (`main.eptd-home section img:not(…):not(…):not(…)`). Sin ellos la foto se queda con su alto natural y no llena la caja:
   una foto apaisada deja un hueco gris debajo y una vertical se recorta solo por abajo. Es lo mismo que hace la tarjeta de
   «Celebraciones» (batch-B.css, .section-catalog__card-media img). */
.blog-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0;   /* la esquina la recorta la caja; la imagen, entera */
  transition: transform 0.4s ease;
}
/* UNA IMAGEN QUE NO ES UNA FOTO APAISADA NO SE RECORTA: se ve ENTERA. A una vertical (la portada de un periódico) o a una
   muy apaisada (un rótulo de 704 × 200) el recorte a 3:2 se le llevaría más de un tercio: el rótulo «HelloPapis» se
   quedaba en «lelloPa». Cuál es cuál lo decide el plugin con el ancho y el alto de la imagen
   (eptd_paginas_blog_imagen_entera, pdtd-funnel/includes/paginas/blog.php: más alta que ancha, o más apaisada que 9:4)
   y lo marca la partial con esta clase. La caja sigue siendo de 3:2 (las tarjetas de una fila siguen parejas) y la imagen
   cabe dentro, centrada, sobre un fondo crema con un filete (el de las cajas del lateral): ni se deforma ni se recorta.
   El filete es un `outline` hacia dentro para no cambiar la medida de la caja. */
.blog-card__media--entera {
  background: var(--eptd-cream);
  outline: 1px solid var(--eptd-border);
  outline-offset: -1px;
}
.blog-card__media--entera img {
  object-fit: contain;
}

.blog-card__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__meta,
.blog-entrada__meta {
  margin: 0 0 0.4rem;
  font-family: var(--eptd-font-ui);
  font-size: 13px;
  font-weight: var(--eptd-fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--eptd-text-muted);   /* 5,7:1 sobre blanco; el gris suave (--eptd-text-soft) no llega a 4,5 */
}
.blog-card__titulo {
  margin: 0 0 var(--eptd-sp-xs);
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
}
.blog-lista--lista .blog-card__titulo { font-size: 1.75rem; }
.blog-card__enlace,
.blog-card__enlace:hover {
  color: var(--eptd-rojo);
  text-decoration: none;
}
/* Toda la tarjeta es el enlace: un solo sitio que pulsar y un solo sitio donde pararse con el teclado. */
.blog-card__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--eptd-radius-card);
}
.blog-card__extracto {
  margin: 0 0 var(--eptd-sp-sm);
  color: var(--eptd-text);
  line-height: 1.6;
  /* Tres líneas: las tarjetas de una fila quedan parejas aunque un extracto sea largo. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.blog-lista--lista .blog-card__extracto {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.blog-card__mas {
  margin-top: auto;
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  letter-spacing: 0.02em;
  color: var(--eptd-rojo);
}
.blog-card__flecha {
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* El anillo de foco es el de toda la web (css/style.css: `:focus-visible:not(#pdtd-funnel-app *)`), que por llevar un
   identificador gana a cualquier clase. Aquí se dibuja alrededor de la TARJETA, que es lo que se pulsa, y no solo
   alrededor de las letras del titular: de ahí los dos `!important`. */
.blog-card__enlace:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.blog-card__enlace:focus-visible::after {
  outline: 3px solid var(--eptd-rojo);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover { transform: translateY(-3px); }
  .blog-card:hover .blog-card__media img { transform: scale(1.03); }
  .blog-card:hover .blog-card__media--entera img { transform: none; }   /* la que se ve entera no se acerca: se saldría de su caja */
  .blog-card:hover .blog-card__enlace { color: var(--eptd-rojo-hover); }
  .blog-card:hover .blog-card__flecha { transform: translateX(3px); }
}
.blog-card:active { transform: scale(0.97); }

/* ─── Las páginas del listado ─── */
.blog-paginacion {
  margin-top: var(--eptd-sp-xl);
}
.blog-paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-paginacion__pag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-pill);
  background: var(--eptd-white);
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
a.blog-paginacion__pag,
a.blog-paginacion__pag:hover {
  color: var(--eptd-rojo);
  text-decoration: none;
}
.blog-paginacion__pag[aria-current] {
  background: var(--eptd-rojo);
  border-color: var(--eptd-rojo);
  color: var(--eptd-white);
}
.blog-paginacion__puntos {
  min-width: 18px;
  text-align: center;
  color: var(--eptd-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  a.blog-paginacion__pag:hover {
    background: var(--eptd-rojo);
    border-color: var(--eptd-rojo);
    color: var(--eptd-white);
  }
}
a.blog-paginacion__pag:active { transform: scale(0.97); }

/* ─── El lateral: buscador, categorías, entradas recientes ─── */
.blog-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--eptd-sp-md);
}
.section-blog--lateral .blog-lateral {
  position: sticky;
  top: calc(100px + var(--eptd-sp-md));   /* la cabecera fija mide 100 px */
}

.blog-buscar {
  position: relative;
  display: flex;
  margin: 0;
}
.blog-buscar__campo {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 48px;
  padding: 0 54px 0 1.15rem;
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-pill);
  background: var(--eptd-white);
  color: var(--eptd-text);
  font-family: var(--eptd-font-body);
  font-size: 16px;   /* con menos, el iPhone acerca la página al tocar el campo */
  transition: border-color 160ms ease;
}
.blog-buscar__campo::placeholder { color: var(--eptd-text-muted); opacity: 1; }
.blog-buscar__campo:focus { border-color: var(--eptd-rojo); }
.blog-buscar__boton {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--eptd-rojo);
  color: var(--eptd-white);
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .blog-buscar__boton:hover { background: var(--eptd-rojo-hover); }
}
.blog-buscar__boton:active { transform: scale(0.97); }

.blog-lateral__grupo {
  padding: var(--eptd-sp-md);
  background: var(--eptd-cream);
  border: 1px solid var(--eptd-border);
  border-radius: var(--eptd-radius-md);
}
.blog-lateral__titulo {
  margin: 0 0 var(--eptd-sp-xs);
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--eptd-rojo);
}
.blog-lateral__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-lateral__lista li + li {
  border-top: 1px solid var(--eptd-border);
}
.blog-lateral__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eptd-sp-sm);
  min-height: 44px;
  padding: 0.55rem 0;
  box-sizing: border-box;
  line-height: 1.35;
  transition: color 160ms ease;
}
.blog-lateral__lista a,
.blog-lateral__lista a:hover {
  color: var(--eptd-text);
  text-decoration: none;
}
.blog-lateral__lista a[aria-current] {
  color: var(--eptd-rojo);
  font-weight: var(--eptd-fw-bold);
}
.blog-lateral__cuenta {
  flex: none;
  color: var(--eptd-text-muted);
  font-family: var(--eptd-font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .blog-lateral__lista a:hover { color: var(--eptd-rojo); }
}

/* ─── Una entrada ─── */
.blog-migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eptd-sp-xs);
  margin: 0 0 var(--eptd-sp-sm);
  font-size: var(--eptd-fs-small);
  color: var(--eptd-text-muted);
}
.blog-migas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;    /* «Blog» son 28 px de letras: con el dedo hacen falta 44 */
  min-height: 44px;
}
.blog-migas a:first-child { justify-content: flex-start; }   /* el primero, pegado al margen como el título */
.blog-migas a,
.blog-migas a:hover {
  color: var(--eptd-text-muted);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .blog-migas a:hover { color: var(--eptd-rojo); text-decoration: underline; }
}

.blog-entrada__titulo {
  margin: 0 0 var(--eptd-sp-xs);
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h1);
  line-height: 1.12;
  color: var(--eptd-rojo);
  text-wrap: balance;
}
.blog-entrada__meta {
  margin-bottom: var(--eptd-sp-md);
}
.blog-entrada__imagen {
  margin: 0 0 var(--eptd-sp-md);
}
/* La imagen destacada, entera y con su proporción: lleva su ancho y su alto, y aquí el alto es automático. */
.blog-entrada__imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--eptd-radius-card);
}

/* El texto, tal como se escribió en WordPress. Lo común (titulares h2 y h3, párrafos, enlaces, tablas) ya viene de
   .section-pagina__contenido; aquí va lo que una entrada trae y una página de texto no. */
.blog-entrada__texto {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.blog-entrada__texto::after {   /* una imagen alineada a un lado no se sale de la entrada */
  content: "";
  display: table;
  clear: both;
}
.blog-entrada__texto > :first-child { margin-top: 0; }
.blog-entrada__texto p { margin: 0 0 1.15em; }
/* Hay entradas antiguas con un h1 dentro del texto: aquí se ve como un titular de sección, no como el título. */
.blog-entrada__texto h1 {
  margin: var(--eptd-sp-lg) 0 var(--eptd-sp-sm);
  font-family: var(--eptd-font-title);
  font-weight: var(--eptd-fw-regular);
  font-size: var(--eptd-fs-h3);
  line-height: 1.2;
  color: var(--eptd-rojo);
}
.blog-entrada__texto h2,
.blog-entrada__texto h3,
.blog-entrada__texto h4 { line-height: 1.25; text-wrap: balance; }
.blog-entrada__texto h4 {
  margin: var(--eptd-sp-md) 0 var(--eptd-sp-xs);
  font-family: var(--eptd-font-ui);
  font-size: 1.05rem;
  font-weight: var(--eptd-fw-bold);
  color: var(--eptd-text);
}
.blog-entrada__texto ul,
.blog-entrada__texto ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}
.blog-entrada__texto li { margin-bottom: 0.4em; }
.blog-entrada__texto li::marker { color: var(--eptd-rojo); }
.blog-entrada__texto blockquote {
  margin: var(--eptd-sp-md) 0;
  padding: 0.15em 0 0.15em var(--eptd-sp-md);
  border-left: 3px solid var(--eptd-rojo);
  font-family: var(--eptd-font-title);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--eptd-text);
}
.blog-entrada__texto blockquote p:last-child { margin-bottom: 0; }
.blog-entrada__texto a {
  text-underline-offset: 2px;
  overflow-wrap: anywhere;   /* una dirección larga pegada tal cual no ensancha la página */
}
/* Las imágenes del texto: nunca más anchas que la columna y SIEMPRE con el alto automático, lleven o no su ancho y su
   alto escritos (así ninguna se estira). Lo mismo los pies de foto y las alineaciones del editor de WordPress. */
.blog-entrada__texto img {
  max-width: 100%;
  height: auto;
  border-radius: var(--eptd-radius-card);
}
.blog-entrada__texto figure,
.blog-entrada__texto .wp-caption {
  max-width: 100%;
  margin: var(--eptd-sp-md) 0;
}
.blog-entrada__texto figcaption,
.blog-entrada__texto .wp-caption-text {
  margin: 0.5em 0 0;
  color: var(--eptd-text-muted);
  font-size: var(--eptd-fs-small);
  line-height: 1.45;
  text-align: center;
}
.blog-entrada__texto .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.blog-entrada__texto .alignleft {
  float: left;
  max-width: 50%;
  margin: 0.35em var(--eptd-sp-md) var(--eptd-sp-sm) 0;
}
.blog-entrada__texto .alignright {
  float: right;
  max-width: 50%;
  margin: 0.35em 0 var(--eptd-sp-sm) var(--eptd-sp-md);
}
/* Vídeos y demás incrustados: nunca más anchos que la columna; los de YouTube y Vimeo, a 16:9. */
.blog-entrada__texto iframe,
.blog-entrada__texto video,
.blog-entrada__texto embed,
.blog-entrada__texto object {
  max-width: 100%;
}
.blog-entrada__texto iframe[src*="youtube"],
.blog-entrada__texto iframe[src*="youtu.be"],
.blog-entrada__texto iframe[src*="vimeo"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.blog-entrada__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  margin-top: var(--eptd-sp-lg);
  font-family: var(--eptd-font-ui);
  font-size: var(--eptd-fs-small);
  font-weight: var(--eptd-fw-bold);
  transition: color 160ms ease;
}
.blog-entrada__volver,
.blog-entrada__volver:hover {
  color: var(--eptd-rojo);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .blog-entrada__volver:hover { color: var(--eptd-rojo-hover); text-decoration: underline; }
}

/* ─── El título de una etiqueta, de una fecha o de un autor (LOS DOS CAMINOS) ───
   Esos tres listados tienen plantilla propia desde esta isla (tag.php, date.php, author.php) y su h1 es lo que haya
   escrito: una etiqueta puede llamarse «regalo original» y WordPress da los meses en minúscula («febrero de 2026»).
   En pantalla empiezan con mayúscula («Regalo original», «Febrero de 2026»); el texto que se pinta no cambia, ni el
   <title>, que sale de otro sitio. Es lo ÚNICO de esta hoja que toca también el listado de siempre: los dos caminos
   pintan el mismo .section-pagina__title (partials/blog_listado.php y partials/blog_bloques.php). Las clases del <body>
   las pone WordPress (body_class() en header.php). */
body.tag .section-pagina__title::first-letter,
body.date .section-pagina__title::first-letter,
body.author .section-pagina__title::first-letter {
  text-transform: uppercase;
}

/* ─── Tableta: el lateral pasa debajo ─── */
@media (max-width: 1099px) {
  .section-blog--lateral .section-blog__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-blog--lateral .blog-lateral {
    position: static;
  }
}

/* ─── Móvil: una entrada por fila ─── */
@media (max-width: 767px) {
  .section-blog {
    padding: var(--eptd-sp-xl) var(--eptd-sp-md);
  }
  .blog-lista { gap: var(--eptd-sp-lg); }
  .blog-lista--tarjetas { grid-template-columns: minmax(0, 1fr); }
  .blog-card__titulo,
  .blog-lista--lista .blog-card__titulo { font-size: 1.4rem; }
  .blog-entrada__texto .alignleft,
  .blog-entrada__texto .alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 auto var(--eptd-sp-sm);
  }
}
/* En una pantalla estrecha no caben todas: fuera las dos vecinas de la actual y los rótulos de «Anterior» y
   «Siguiente» (quedan sus flechas; el rótulo sigue ahí para el lector de pantalla). */
@media (max-width: 479px) {
  .blog-paginacion__lista .es-vecina { display: none; }
  .blog-paginacion__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ─── «Reducir movimiento»: nada se desplaza ni se hunde; los colores siguen cambiando, sin transición ─── */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card__media img,
  .blog-card__flecha,
  .blog-paginacion__pag,
  .blog-buscar__campo,
  .blog-buscar__boton,
  .blog-lateral__lista a,
  .blog-entrada__volver {
    transition: none;
  }
  .blog-card:hover,
  .blog-card:active,
  .blog-card:hover .blog-card__media img,
  .blog-card:hover .blog-card__flecha,
  a.blog-paginacion__pag:active,
  .blog-buscar__boton:active {
    transform: none;
  }
}

/* ===== sections/batch-K-categoria.css ===== */

/* Ficha de categoría (/tipo/{categoría}/) con la cabecera única (14-10): las baldosas de las categorías hijas.
   Este fichero se encola solo, por el glob de batch-*.css de functions.php, en las páginas del rediseño (las
   categorías lo son desde el 14-10). Pisa las reglas viejas de css/style.css (compilado de scss/comun/_shop.scss,
   que no se toca) solo dentro de .eptd-categoria-main.
   Lo que arregla: el rótulo iba en posición absoluta sobre una caja de alto fijo y los nombres largos se salían;
   y sin foto destacada la baldosa era un cuadrado rojo vacío (ficha_categoria.php ya no pinta ese cuadrado:
   la baldosa es el propio rótulo, más alto, con la clase .sin-foto). */
.eptd-categoria-main .page-categoria-producto .block-productos { margin: 56px 0 72px; }
.eptd-categoria-main .page-categoria-producto .block-productos .producto { margin-bottom: 28px; overflow: visible; }
.eptd-categoria-main .page-categoria-producto .block-productos .producto h4.titulo {
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; margin: 0; padding: 18px 20px;
  background: #a71923; box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  font-family: "Prata", serif; font-size: 18px; line-height: 1.3; text-align: center;
  transition: background-color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.eptd-categoria-main .page-categoria-producto .block-productos .producto h4.titulo a {
  position: static; transform: none; display: block; width: auto; padding: 0;
  color: #fff; text-wrap: balance; overflow-wrap: anywhere;
}
.eptd-categoria-main .page-categoria-producto .block-productos .producto h4.titulo a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.eptd-categoria-main .page-categoria-producto .block-productos .producto.sin-foto h4.titulo { min-height: 150px; font-size: 20px; }
.eptd-categoria-main .page-categoria-producto .block-productos .producto:hover h4.titulo { background: #c12230; }
.eptd-categoria-main .page-categoria-producto .block-productos .producto h4.titulo:active { transform: scale(.98); }
@media (max-width: 767px) {
  .eptd-categoria-main .page-categoria-producto .block-productos { margin: 32px 0 48px; }
  .eptd-categoria-main .page-categoria-producto .block-productos .producto { margin-bottom: 16px; }
  .eptd-categoria-main .page-categoria-producto .block-productos .producto h4.titulo { min-height: 72px; }
  .eptd-categoria-main .page-categoria-producto .block-productos .producto.sin-foto h4.titulo { min-height: 96px; }
}

/* ===== eptd-cookies.css ===== */

/* ════════════════════════════════════════════════════════════════════════════
   EPTD · Aviso de cookies propio (isla cookies-propias, 12-10-2026)

   La banda de abajo y el panel de ajustes de partials/cookies.php. Se carga en TODAS las páginas públicas
   (includes/init/cookies.php), también en las del tema viejo, donde NO está la hoja maestra del rediseño
   (assets/css/eptd-home.css). Por eso:

   · Los colores y las tipografías son los de la web: se leen de las variables de la hoja maestra (--eptd-rojo,
     --eptd-font-title…) y, donde esa hoja no está, valen lo mismo que valen allí (el segundo valor de cada var()).
     Si cambia un token en eptd-home.css, cámbialo también aquí.
   · La fuente del título (Modern No. 20) se declara otra vez: es el mismo fichero y el navegador lo baja una sola vez.
   · Todo va con dos clases (.eptd-cookies .eptd-cookies__x) y con sus márgenes, fuentes y colores puestos a mano: el
     tema viejo y Bootstrap tienen estilos por etiqueta (h2, p, a, button, label, ul) que si no se colarían.

   Capas: la banda, 100200; el panel, 100210. Por encima de todo lo de la web (el tema llega a 9999; los modales del
   espacio del cliente y del editor, a 100100).

   Movimiento: TODO lo que se mueve o se funde está al final, dentro de «prefers-reduced-motion: no-preference». Quien
   pide menos movimiento no recibe ninguna transición: las cosas aparecen y desaparecen.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Modern No. 20';
  src: url('../../fonts/MOD20.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

.eptd-cookies {
  --ck-rojo: var(--eptd-rojo, #A61D24);
  --ck-rojo-hover: var(--eptd-rojo-hover, #8B181E);
  --ck-texto: var(--eptd-text, #333333);
  --ck-suave: var(--eptd-text-muted, #666666);
  --ck-apagado: var(--eptd-text-soft, #888888);
  --ck-blanco: var(--eptd-white, #FFFFFF);
  --ck-crema: var(--eptd-cream, #FAF8F5);
  --ck-borde: var(--eptd-border, #E0E0E0);
  --ck-fuente-titulo: var(--eptd-font-title, 'Modern No. 20', Georgia, 'Times New Roman', serif);
  --ck-fuente: var(--eptd-font-body, 'Lato', -apple-system, BlinkMacSystemFont, sans-serif);
  --ck-radio-pastilla: var(--eptd-radius-pill, 50px);
  --ck-radio: var(--eptd-radius-md, 8px);
  /* La curva de los botones de la web (eptd-home.css, .eptd-btn): sale deprisa y frena. */
  --ck-salida: cubic-bezier(0.23, 1, 0.32, 1);
  /* La de una hoja que sube desde abajo, como las del teléfono. */
  --ck-hoja: cubic-bezier(0.32, 0.72, 0, 1);

  font-family: var(--ck-fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ck-texto);
  text-align: left;
}
.eptd-cookies,
.eptd-cookies *,
.eptd-cookies *::before,
.eptd-cookies *::after { box-sizing: border-box; }

/* Con el panel abierto, la página de detrás no se desplaza (las clases las pone y las quita eptd-cookies.js). Si la
   página tenía una barra de desplazamiento que ocupa sitio, se le guarda el hueco para que no dé un salto a lo ancho. */
html.eptd-cookies-abierto { overflow: hidden; }
html.eptd-cookies-abierto--barra { scrollbar-gutter: stable; }

/* ── Textos ── */
.eptd-cookies .eptd-cookies__titulo {
  margin: 0;
  padding: 0;
  font-family: var(--ck-fuente-titulo);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ck-rojo);
}
.eptd-cookies .eptd-cookies__texto {
  margin: 0;
  padding: 0;
  font-family: var(--ck-fuente);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--ck-texto);
}
.eptd-cookies .eptd-cookies__enlace,
.eptd-cookies .eptd-cookies__enlace:hover,
.eptd-cookies .eptd-cookies__enlace:visited {
  color: var(--ck-rojo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.eptd-cookies .eptd-cookies__enlace:focus-visible {
  outline: 3px solid var(--ck-rojo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Botones: pastilla, como los .eptd-btn de la web. Todos iguales: aceptar no pesa más que rechazar. ── */
.eptd-cookies .eptd-cookies__boton {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  font-family: var(--ck-fuente);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ck-rojo);
  background: var(--ck-blanco);
  border: 2px solid var(--ck-rojo);
  border-radius: var(--ck-radio-pastilla);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* El «encima», solo con un ratón de verdad (en un teléfono se queda puesto después de tocar). */
@media (hover: hover) and (pointer: fine) {
  .eptd-cookies .eptd-cookies__boton:hover {
    background: var(--ck-rojo);
    color: var(--ck-blanco);
  }
}
.eptd-cookies .eptd-cookies__boton:focus-visible,
.eptd-cookies .eptd-cookies__cerrar:focus-visible,
.eptd-cookies .eptd-cookies__interruptor:focus-visible {
  outline: 3px solid var(--ck-rojo);
  outline-offset: 3px;
}

/* ── La banda ── */
.eptd-cookies .eptd-cookies__banda {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100200;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ck-crema);
  border-top: 1px solid var(--ck-borde);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.12);
}
.eptd-cookies .eptd-cookies__banda[hidden] { display: none; }
.eptd-cookies .eptd-cookies__banda-caja {
  display: grid;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.eptd-cookies .eptd-cookies__mensaje {
  display: grid;
  gap: 6px;
  max-width: 72ch;
}
/* En el móvil, aceptar y rechazar a la par y «Ajustar» debajo; las filas miden lo mismo aunque un texto parta en dos. */
.eptd-cookies .eptd-cookies__botones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}
.eptd-cookies .eptd-cookies__botones > :nth-child(3) { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .eptd-cookies .eptd-cookies__banda { padding: 20px 32px; }
  .eptd-cookies .eptd-cookies__banda-caja {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
  }
  /* Los tres botones, del mismo ancho: el del texto más largo. */
  .eptd-cookies .eptd-cookies__botones {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .eptd-cookies .eptd-cookies__botones > :nth-child(3) { grid-column: auto; }
  .eptd-cookies .eptd-cookies__banda .eptd-cookies__boton {
    padding: 8px 22px;
    white-space: nowrap;
  }
}

/* ── Compacta y ABAJO (raíz .eptd-cookies--compacta: las páginas con funnel, includes/init/cookies.php › eptd_cookies_compacta()).
   En el faldón como en el resto de la web (Fran, 14-10: «que aparezca en el faldón también»; el 13-10 iba arriba),
   pero en pequeño: sin título, con el texto corto y los tres botones en una fila, para quitarse de en medio de
   «Atrás · Continuar» en cuanto el visitante decide. Lleva su hueco al final de la página, como la banda normal. ── */
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda .eptd-cookies__titulo { display: none; }
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda-caja { gap: 10px; }
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__texto { font-size: 13px; line-height: 1.35; }
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__botones {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__botones > :nth-child(3) { grid-column: auto; }
.eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda .eptd-cookies__boton {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 13px;
}
@media (min-width: 900px) {
  .eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda { padding: 10px 32px; }
  .eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda-caja { gap: 24px; }
  .eptd-cookies.eptd-cookies--compacta .eptd-cookies__botones { grid-template-columns: none; }
  .eptd-cookies.eptd-cookies--compacta .eptd-cookies__banda .eptd-cookies__boton { padding: 6px 18px; font-size: 14px; }
}

/* ── El panel: en el móvil, una hoja que sube desde abajo; en pantalla ancha, una tarjeta centrada ── */
.eptd-cookies .eptd-cookies__velo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 20, 26, 0.55);
}
.eptd-cookies .eptd-cookies__velo[hidden] { display: none; }
.eptd-cookies .eptd-cookies__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--ck-blanco);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
  outline: none;
}
/* El filete de abajo separa el título de lo que se desplaza por debajo de él. */
.eptd-cookies .eptd-cookies__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 12px 20px;
  border-bottom: 1px solid var(--ck-borde);
}
.eptd-cookies .eptd-cookies__cabecera .eptd-cookies__titulo { padding-top: 9px; }
.eptd-cookies .eptd-cookies__cerrar {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--ck-suave);
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .eptd-cookies .eptd-cookies__cerrar:hover {
    color: var(--ck-texto);
    background: var(--ck-crema);
  }
}
.eptd-cookies .eptd-cookies__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 4px;
}
.eptd-cookies .eptd-cookies__categorias {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--ck-borde);
}
.eptd-cookies .eptd-cookies__categoria {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ck-borde);
  list-style: none;
}
.eptd-cookies .eptd-cookies__categoria:last-child { border-bottom: 0; }
.eptd-cookies .eptd-cookies__categoria-titulo {
  margin: 0;
  padding: 0;
  font-family: var(--ck-fuente);
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ck-texto);
}
.eptd-cookies .eptd-cookies__categoria-titulo label {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.eptd-cookies .eptd-cookies__categoria-detalle {
  margin: 4px 0 0;
  padding: 0;
  font-family: var(--ck-fuente);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
  color: var(--ck-suave);
}

/* El interruptor: la casilla mide 64×44 (la zona que se toca) y dentro se dibuja el carril (50×30) con el fondo
   recortado a su caja interior; el botón es un degradado redondo que va de un lado a otro. Sin pseudoelementos: en una
   casilla no todos los navegadores los pintan. */
.eptd-cookies .eptd-cookies__interruptor {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  margin: 0;
  padding: 7px;
  border: 0;
  border-radius: 22px;
  background-color: var(--ck-apagado);
  background-image: radial-gradient(circle closest-side, var(--ck-blanco) 78%, transparent 82%);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: left center;
  background-origin: content-box;
  background-clip: content-box;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.eptd-cookies .eptd-cookies__interruptor:checked {
  background-color: var(--ck-rojo);
  background-position: right center;
}
.eptd-cookies .eptd-cookies__interruptor:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.eptd-cookies .eptd-cookies__pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--ck-crema);
  border-top: 1px solid var(--ck-borde);
}
.eptd-cookies .eptd-cookies__pie > :first-child { grid-column: 1 / -1; }
/* «Guardar mi elección» es la acción del panel: va rellena. Aceptar y rechazar siguen iguales entre sí. */
.eptd-cookies .eptd-cookies__boton[data-eptd-cookies="guardar"] {
  color: var(--ck-blanco);
  background: var(--ck-rojo);
}
@media (hover: hover) and (pointer: fine) {
  .eptd-cookies .eptd-cookies__boton[data-eptd-cookies="guardar"]:hover {
    background: var(--ck-rojo-hover);
    border-color: var(--ck-rojo-hover);
  }
}

@media (min-width: 768px) {
  .eptd-cookies .eptd-cookies__velo {
    align-items: center;
    padding: 24px;
  }
  .eptd-cookies .eptd-cookies__panel {
    max-width: 560px;
    max-height: min(720px, 100%);
    border-radius: var(--ck-radio);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  }
  .eptd-cookies .eptd-cookies__cabecera { padding: 20px 16px 14px 28px; }
  .eptd-cookies .eptd-cookies__cuerpo { padding: 20px 28px 8px; }
  /* Los botones, como en el móvil: «Guardar» a todo lo ancho y, debajo, aceptar y rechazar a la par. En tres columnas
     «Guardar mi elección» no cabía en una línea. */
  .eptd-cookies .eptd-cookies__pie {
    padding: 16px 28px 20px;
    border-radius: 0 0 var(--ck-radio) var(--ck-radio);
  }
}

/* ── Movimiento: solo para quien no ha pedido menos. Solo `transform` y `opacity` (y el color al pasar por encima):
   nada que obligue al navegador a recolocar la página. Entrar, despacio y frenando; salir, más deprisa. ── */
@media (prefers-reduced-motion: no-preference) {
  /* Al pulsar, el botón se hunde un poco: la respuesta de «te he oído», como en los botones de la web. */
  .eptd-cookies .eptd-cookies__boton {
    transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ck-salida);
  }
  .eptd-cookies .eptd-cookies__boton:active { transform: scale(0.97); }
  .eptd-cookies .eptd-cookies__cerrar {
    transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ck-salida);
  }
  .eptd-cookies .eptd-cookies__cerrar:active { transform: scale(0.94); }
  .eptd-cookies .eptd-cookies__interruptor {
    transition: background-color 160ms ease, background-position 200ms var(--ck-salida);
  }

  /* La banda sube un poco y se funde. `display … allow-discrete` la deja a la vista mientras se va. */
  .eptd-cookies .eptd-cookies__banda {
    opacity: 1;
    transform: none;
    transition: opacity 220ms ease-out, transform 280ms var(--ck-salida), display 280ms allow-discrete;
  }
  .eptd-cookies .eptd-cookies__banda[hidden] {
    opacity: 0;
    transform: translateY(16px);
    transition-duration: 160ms;
  }
  @starting-style {
    .eptd-cookies .eptd-cookies__banda:not([hidden]) {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  /* El velo se funde y la hoja sube desde abajo, lo que mide de alto. */
  .eptd-cookies .eptd-cookies__velo {
    opacity: 1;
    transition: opacity 200ms ease-out, display 360ms allow-discrete;
  }
  .eptd-cookies .eptd-cookies__velo[hidden] {
    opacity: 0;
    transition-duration: 200ms;
  }
  @starting-style {
    .eptd-cookies .eptd-cookies__velo:not([hidden]) { opacity: 0; }
  }
  .eptd-cookies .eptd-cookies__panel {
    transform: none;
    transition: transform 360ms var(--ck-hoja);
  }
  .eptd-cookies .eptd-cookies__velo[hidden] .eptd-cookies__panel {
    transform: translateY(100%);
    transition-duration: 200ms;
  }
  @starting-style {
    .eptd-cookies .eptd-cookies__velo:not([hidden]) .eptd-cookies__panel { transform: translateY(100%); }
  }
}
/* En pantalla ancha la tarjeta no sube: crece un poco desde su centro (nunca desde cero) y se funde. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .eptd-cookies .eptd-cookies__panel {
    opacity: 1;
    transition: transform 220ms var(--ck-salida), opacity 180ms ease-out;
  }
  .eptd-cookies .eptd-cookies__velo[hidden] .eptd-cookies__panel {
    transform: scale(0.96);
    opacity: 0;
    transition-duration: 160ms;
  }
  @starting-style {
    .eptd-cookies .eptd-cookies__velo:not([hidden]) .eptd-cookies__panel {
      transform: scale(0.96);
      opacity: 0;
    }
  }
}

/* ── Colores forzados (alto contraste de Windows): los fondos se pierden, así que el interruptor es la casilla de siempre. ── */
@media (forced-colors: active) {
  .eptd-cookies .eptd-cookies__interruptor {
    -webkit-appearance: auto;
    appearance: auto;
    width: 44px;
    padding: 0;
    background: none;
  }
  .eptd-cookies .eptd-cookies__banda,
  .eptd-cookies .eptd-cookies__panel { border: 1px solid CanvasText; }
}

/* El aviso no se imprime, ni el hueco que eptd-cookies.js deja al final de la página mientras la banda está a la vista. */
@media print {
  .eptd-cookies,
  .eptd-cookies-hueco { display: none; }
}