/* ===========================
   PALETA Y BASE
   =========================== */

:root {
  --bg-page: #eeeeee;
  --bg-panel: #ffffff;
  --bg-muted: #f5f5f5;

  --text-main: #111827;    /* casi negro, cómodo de leer */
  --text-muted: #4b5563;
  --text-soft: #6b7280;

  --accent: #137b85;       /* teal calmado */
  --accent-soft: #95d3be;  /* teal claro */
  --accent-warm: #ea9f22;  /* dorado para detalles */
  --accent-dark: #091e26;  /* azul muy oscuro */

  --border-soft: #e5e7eb;
  --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.08);
  --radius-card: 1rem;
}

html {
  font-family: "Montserrat", sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 80px; /* hueco para el header fijo */
  background-color: #fefce8;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--text-main);
}

a {
  text-decoration: none;
  color: inherit;
}

main a {
  color: var(--accent);
}

main a:hover {
  text-decoration: underline;
}

li {
  list-style: none;
}


/* ===========================
    HEADER / MENÚ
   =========================== */

header.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.wrap-logo-header {
    display: flex;
    align-items: center;
    flex-basis: 15%;
}

.logo-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* LOGO PNG (nuevo) */
.logo-header img {
    display: block;
    height: 50px;
    width: auto;
}

/* (Logo anterior por spans: compatibilidad por si alguna página vieja lo usa) */
.logo-header span:nth-child(1) {
    font-weight: 700;
    color: var(--accent-dark);
    font-size: 1.1em;
}

.logo-header span:nth-child(2) {
    font-weight: 500;
    color: var(--text-soft);
    font-size: 0.8em;
}

.logo-header span:nth-child(3) {
    font-weight: 700;
    color: var(--accent);
    font-size: 1.2em;
}

/* Texto oculto accesible/SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wrap-nav-header {
    display: flex;
    flex-basis: 55%;
}

.nav-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
}

ul.main-menu {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    font-size: 0.95rem;
    gap: 0.25rem;
}

li.menu-item {
    display: flex;
}

li.menu-item a {
    padding: 0.4rem 0.9rem;
    color: var(--text-soft);
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

li.menu-item a:hover {
    background-color: rgba(19, 123, 133, 0.08);
    color: var(--accent-dark);
}

ul.main-menu #nav-main-about {
    background-color: var(--accent);
    color: #fff;
}

/* Icono menú móvil */
.toggle-menu {
    display: none;
    background-color: #fff;
    border: none;
}

.toggle-menu img {
    width: 27px;
    height: auto;
    display: block;
}

input#check {
    display: none;
}

/* Desktop ancho */
@media (min-width: 1082px) {
    .header-wrap {
        padding-inline: 2rem;
    }
}

/* Móvil / tablet pequeña */
@media (max-width: 850px) {
    .header-wrap {
        padding: 0.75rem 1rem;
    }

    .wrap-logo-header {
        flex-basis: auto;
    }

    .logo-header img {
        height: 45px;
        width: auto;
    }

    /* si aún hay páginas viejas con spans, también se adaptan */
    .logo-header span:nth-child(1) {
        font-size: 1em;
    }

    .logo-header span:nth-child(2) {
        font-size: 0.75em;
    }

    .logo-header span:nth-child(3) {
        font-size: 1.05em;
    }

    .toggle-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ul.main-menu {
        display: none;
        margin: 0;
        padding: 0;
        position: fixed;
        left: 0;
        top: 80px; /* coincide con tu body padding-top */
        width: 100%;
        background-color: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
        flex-direction: column;
        align-items: center;
    }

    label.checkbtn {
        margin-left: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #check:checked ~ ul.main-menu {
        display: flex;
        font-size: 1.2rem;
    }

    li.menu-item {
        margin: 0.75rem 0;
    }

    /* El botón “NOSOTROS” sigue siendo botón también en móvil */
    ul.main-menu #nav-main-about {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}




/* ===========================
   HERO NUEVO
   =========================== */

.hero {
  position: relative;
  padding: 2.5rem 1.5rem 3.5rem;
  background:
    radial-gradient(circle at top left, rgba(149, 211, 190, 0.55) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(234, 159, 34, 0.35) 0, transparent 55%),
    linear-gradient(135deg, #091e26, #020617);
  color: #f9fafb;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero-content {
  max-width: 640px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.6);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.hero h1 {
  font-size: 2rem;
  margin: 0 0 0.75rem;
}

.hero-lead {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  color: #e5e7eb;
}

.hero-benefits {
  padding-left: 1.2rem;
  margin: 0 0 1.5rem;
  color: #e5e7eb;
  font-size: 0.95rem;
}

.hero-benefits li {
  list-style: disc;
  margin-bottom: 0.35rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Lado derecho del hero */
.hero-side {
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  background-color: rgba(15, 23, 42, 0.9);
  border-radius: 1.25rem;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  max-width: 340px;
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.hero-card-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #a5b4fc;
  margin: 0 0 0.35rem;
}

.hero-card h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: #e5e7eb;
}

.hero-card-text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #cbd5f5;
}

.hero-card-list {
  padding-left: 1.1rem;
  margin: 0;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.hero-card-list li {
  list-style: disc;
  margin-bottom: 0.25rem;
}

/* Botones en hero (reutilizan btn-cta y btn-ghost) */
.hero-btn-primary {
  font-size: 0.95rem;
}

.hero-btn-secondary {
  font-size: 0.9rem;
}

/* Responsive hero */
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .hero h1 {
    font-size: 2.35rem;
  }

  .hero-lead {
    font-size: 1.1rem;
  }
}

@media (max-width: 899px) {
  .hero {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-side {
    justify-content: flex-start;
  }

  .hero-card {
    max-width: 100%;
  }
}


/* Hero pequeño para páginas internas */
.hero--small {
  padding: 1.8rem 1.5rem 2.4rem;
}

.hero-inner--small {
  max-width: 900px;
}

.hero--small .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.hero--small .hero-side {
  display: none; /* en el hero pequeño no queremos la tarjeta lateral */
}

.hero--small .hero-content h1 {
  font-size: 1.8rem;
}

.hero--small .hero-lead {
  max-width: 640px;
}

/* en móvil aún más compacto */
@media (max-width: 768px) {
  .hero--small {
    padding: 1.6rem 1.25rem 2.1rem;
  }

  .hero--small .hero-content h1 {
    font-size: 1.5rem;
  }
}


/* ===========================
   MAIN (COLUMNA DE CONTENIDO)
   =========================== */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

main > section {
  margin-bottom: 3rem;
}

main > section.banda-full {
  margin-top: 0;
  margin-bottom: 0;
}

main h2,
main h3 {
  margin-top: 1rem;
  margin-bottom: 0.85rem;
  color: var(--accent-dark);
}

main p {
  margin-top: 0;
  margin-bottom: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
}

main ul {
  padding-left: 1.5rem;
}

main li {
  margin-bottom: 0.45rem;
}


/* ===========================
   INTRO
   =========================== */

section.intro h2:first-of-type {
  font-size: 1.75rem;
  margin-bottom: 0.6rem;
}

/* Caja blanca dentro del intro sobre fondo amarillo */
.intro-card {
  background-color: var(--bg-panel);
  background: radial-gradient(circle at top right, rgba(234, 159, 34, 0.16) 0, transparent 55%);
  border-radius: 1rem;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.intro-card h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
  color: #091e26;
}

.intro-card p {
  margin-bottom: 0.9rem;
  color: #222;
}

/* un poco más de separación entre bloques de h2+p */
.intro-card h2 + p {
  margin-bottom: 1.1rem;
}

/* en móvil, un poco menos de padding para que no se vea “mazacote” */
@media (max-width: 640px) {
  .intro-card {
    padding: 1.4rem 1.3rem 1.3rem;
    border-radius: 0.9rem;
  }

  .intro-card h2 {
    font-size: 1.25rem;
  }
}


/* ===========================
   BOTONES
   =========================== */

a.btn-amazon,
a.btn-leer-mas,
a.btn-cta,
a.btn-ghost {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  font-size: 0.93rem;
}

/* Botón Amazon (amarillo) */
a.btn-amazon {
  background-color: var(--accent-warm);
  color: #222;
  box-shadow: var(--shadow-soft);
}

a.btn-amazon:hover {
  background-color: #d58c15;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

/* Botón Leer más (verde) */
a.btn-leer-mas {
  background-color: #137b85;
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

a.btn-leer-mas:hover {
  background-color: #155858;
  transform: translateY(-1px);
}

/* Botón CTA (principal oscuro) */
a.btn-cta {
  background-color: #023742;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

a.btn-cta:hover {
  background-color: #020617;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

/* Botón secundario (fantasma) */
a.btn-ghost {
  background-color: transparent;
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
}

a.btn-ghost:hover {
  border-color: var(--accent-soft);
  background-color: rgba(15, 23, 42, 0.6);
}

/* Accesibilidad: focus visible con teclado */
a.btn-amazon:focus-visible,
a.btn-leer-mas:focus-visible,
a.btn-cta:focus-visible,
a.btn-ghost:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}


/* ===========================
   BLOQUE PRODUCTOS AMAZON
   (Base + variables de skin)
   =========================== */

section.productos-amazon {
  margin-bottom: 2.75rem;

  /* Skin (claro por defecto) */
  --pa-lead: var(--text-muted);
  --pa-card-bg: var(--bg-panel);
  --pa-card-shadow: var(--shadow-soft);
  --pa-title: var(--accent-dark);
  --pa-text: var(--text-soft);
  --pa-img-radius: 0.75rem;
}

section.productos-amazon h2 {
  margin-bottom: 0.4rem;
}

section.productos-amazon > p {
  margin-bottom: 1.2rem;
  color: var(--pa-lead);
}

/* grid de productos */
.productos-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* tarjeta de producto */
.producto-amazon {
  background-color: var(--pa-card-bg);
  border-radius: var(--radius-card);
  padding: 0.5rem 1.2rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 350px;
  min-width: 350px;
  min-height: 450px;
}

.producto-amazon img {
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: var(--pa-img-radius);
  margin-bottom: 0.75rem;
}

.producto-amazon h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  color: var(--pa-title);
}

.producto-amazon p {
  flex-grow: 1;
  margin-bottom: 0.7rem;
  font-size: 0.92rem;
  color: var(--pa-text);
}

/* 3 columnas en escritorio */
@media (min-width: 900px) {
  .productos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ajustes para móvil: tarjetas más compactas y apiladas */
@media (max-width: 899px) {
  .productos-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 2rem;
    gap: 4rem;
  }

  .producto-amazon {
    padding: 1rem 1.05rem;
  }

  .producto-amazon img {
    height: 160px;
    margin-bottom: 0.6rem;
  }

  .producto-amazon p {
    font-size: 0.9rem;
  }
}

/* ===========================
   VARIANTE OSCURA
   (solo cambia variables)
   =========================== */

section.productos-amazon--oscuro {
  padding: 3rem 0 2.5rem 0;
  color: #f7f7f7;

  --pa-lead: #e5e7eb;
  --pa-card-bg: #111827;
  --pa-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --pa-title: #f9fafb;
  --pa-text: #d1d5db;
  --pa-img-radius: 0.6rem;
}

section.productos-amazon--oscuro h2 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: #ffffff;
}

section.productos-amazon--oscuro > p {
  margin-bottom: 1.3rem;
  color: var(--pa-lead);
}




/* ===========================
   TARJETA AMAZON: BADGE + BULLETS (compacto)
   =========================== */

.producto-amazon__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-bottom: 0.45rem;
    background: rgba(2, 55, 66, 0.10);
    color: var(--accent-dark);
    border: 1px solid rgba(2, 55, 66, 0.18);
}

.producto-amazon__desc {
    margin-bottom: 0.55rem;
}

/* Logo placeholder: que no se recorte */
.producto-amazon img {
    object-fit: contain;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.55);
}

/* Bullets compactos */
.producto-amazon__bullets {
  
    padding: 0;
    margin: 0 0 0.75rem 0;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.producto-amazon__bullets li {
    margin: 0.2rem 0;
    line-height: 1.25;
}

.producto-amazon__bullets li::before {
    content: "· ";
    font-weight: 900;
    margin-right: 0.15rem;
}

/* Ajuste en bloque oscuro */
section.productos-amazon--oscuro .producto-amazon__badge {
    background: rgba(255, 255, 255, 0.10);
    color: #f9fafb;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

section.productos-amazon--oscuro .producto-amazon img {
    background: rgba(255, 255, 255, 0.08);
}

section.productos-amazon--oscuro .producto-amazon__bullets {
    color: #d1d5db;
}


/* Ajuste de anchura SOLO para el bloque de productos principales */
section.productos-amazon .producto-amazon {
  min-width: 0;        /* deja de exigir mínimo 350px */
  max-width: 100%;     /* que pueda usar todo el ancho de su celda de grid */
}



/* ===========================
   CTA + LEER MÁS
   =========================== */

section.cta {
  background-color: var(--bg-panel);
  color: var(--text-main);
  border-radius: var(--radius-card);
  padding: 1.9rem 1.7rem;
  text-align: left;
  margin-bottom: 2.4rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}

section.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(234, 159, 34, 0.16) 0, transparent 55%);
  pointer-events: none;
}

section.cta h2,
section.cta h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  color: #091e26;
}

/* color del encabezado cta al final de la home, porque tiene fondo oscuro */

#titulo-cta-home {
  color: #f7f7f7;
}


section.cta p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

section.cta > * {
  position: relative;
  z-index: 1;
}

section.cta-leer-mas {
  background-color: var(--bg-panel);
  border-radius: 0.9rem;
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 2rem;
  border: 1px solid var(--border-soft);
}

section.cta-leer-mas h2,
section.cta-leer-mas h3 {
  margin-top: 0;
  margin-bottom: 0.7rem;
}

section.cta-leer-mas p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

/* contenedor de CTA + leer más */
.llamada-accion {
  margin: 3rem 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .llamada-accion {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
    align-items: stretch;
  }

  .llamada-accion .cta,
  .llamada-accion .cta-leer-mas {
    margin-bottom: 0;
  }
}


/* ===========================
   BLOQUE VENTAJAS
   =========================== */

section.ventajas ul {
  list-style: none; /* quitamos los bullets por defecto */
  background-color: var(--bg-panel);
  border-radius: 0.9rem;
  padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 3rem;
}

/* cada elemento con sangría y bullet custom */
section.ventajas li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  color: var(--text-main);
}

/* “redondelito” verde */
section.ventajas li::before {
  content: "";
  position: absolute;
  top: 0.10rem;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #137b85;
}

section.ventajas .cta {
  margin-top: 0.5rem;
}


/* ===========================
   VIDEO (EMBED YOUTUBE)
   =========================== */

.video-bloque {
  margin: 1.5rem 0 2.5rem;
}

.video-bloque p {
  color: var(--text-muted);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 720px;
  margin: 1rem auto 0.5rem;
  border-radius: 0.9rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-top: 0.4rem;
  margin-bottom: 2.2rem;
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}


/* ===========================
   GRUPO 2 (GUÍAS + CTA + AMAZON)
   =========================== */

.grupo2 {
  display: grid;
  gap: 2rem;
  align-items: flex-start;
}

.guias {
  background-color: var(--bg-panel);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.7rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-soft);
}

.guias h2 {
  margin-top: 0;
  margin-bottom: 0.45rem;
  font-size: 1.15rem;
}

.guias p {
  margin-bottom: 0.8rem;
  color: var(--text-muted);
}

/* Escritorio:
   - Fila 1: guías | CTA
   - Fila 2: Amazon a todo el ancho
*/
@media (min-width: 1024px) {
  .grupo2 {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "guias cta"
      "productos productos";
  }

  .grupo2 .guias {
    grid-area: guias;
  }

  .grupo2 .cta-leer-mas {
    grid-area: cta;
    margin-bottom: 0;
  }

  .grupo2 .productos-amazon {
    grid-area: productos;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .grupo2 .productos-grid {
    margin-bottom: 1.5rem;
  }
}


/* ===========================
   CARRUSEL (ARTÍCULOS / POST)
   =========================== */

section.carrusel {
  margin-bottom: 3rem;
}

section.carrusel h2 {
  margin-bottom: 1rem;
}

.carrusel-list {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}





/* Ancho/alto de la barra (horizontal) */
.carrusel-list::-webkit-scrollbar {
  height: 10px;            /* grosor de la barra horizontal */
}

/* “Pista” de la barra (fondo) */
.carrusel-list::-webkit-scrollbar-track {
  background: #9ca3af;  /* o un color suave tipo #111827 */
}

/* “Thumb” que se mueve */
.carrusel-list::-webkit-scrollbar-thumb {
  background: #137b85;    /* color del knob */
  border-radius: 999px;
}

/* Thumb al hacer hover */
.carrusel-list::-webkit-scrollbar-thumb:hover {
  background: #023742;
}



.carrusel-hint {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
  text-align: center;
}










.card-post {
  min-width: 260px;
  max-width: 320px;
  background-color: var(--bg-panel);
  border-radius: 0.9rem;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
  flex-shrink: 0;
}

.card-post h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

.card-post p {
  font-size: 0.92rem;
  color: var(--text-soft);
}


/* ===========================
   BLOQUE FINAL
   =========================== */

.bloque-final {
  color: #f9fafb;
}

.bloque-final .cta {
  background: radial-gradient(circle at top left, rgba(149, 211, 190, 0.35) 0, transparent 55%),
              linear-gradient(135deg, #091e26, #020617);
  color: inherit;
  box-shadow: none;
  padding: 2rem;
  text-align: left;
  border: none;
}

.bloque-final .cta::before {
  display: none;
}

.bloque-final .cta h3 {
  color: #ffffff;
}

.bloque-final .cta p {
  color: #d1d5db;
}

.bloque-final .carrusel h2 {
  color: #ffffff;
}

.bloque-final .card-post {
  background-color: #efefc8;
  box-shadow: var(--shadow-soft);
  border-radius: 0.9rem;
}

.bloque-final .card-post h3 {
  color: var(--accent-dark);
}

.bloque-final .card-post p {
  color: var(--text-main);
}


/* ===========================
   FAQ
   =========================== */

section.faq {
  padding: 3rem 0 2.5rem;
}

section.faq h2 {
  text-align: left;
  margin-bottom: 0.4rem;
}

section.faq p {
  margin-bottom: 1.4rem;
  color: var(--text-muted);
}

.faq .acordeon details {
  margin-bottom: 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid #facc15;
  background-color: #fefce8;
  padding: 0.75rem 0.95rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  color: #854d0e;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq .respuesta p {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.92rem;
  color: #713f12;
}


/* ===========================
   FOOTER
   =========================== */

footer {
  background-color: #020617;
  color: #e5e7eb;
  padding: 1.5rem 1.5rem;
  font-size: 0.88rem;
  text-align: center;
}

footer p {
  margin: 0.2rem 0;
}

@media (min-width: 900px) {
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  footer p {
    margin: 0.25rem 0.5rem;
  }
}


/* =================================================
   BANDAS A PANTALLA COMPLETA (banda-full)
   ================================================= */

.banda-full {
  position: relative;
  padding: 2.2rem 0;
}

.banda-full::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--banda-bg, transparent);
}

/* intro: amarillo suavito */
section.intro.banda-full {
  --banda-bg: #fefce8;
}

/* por defecto, bloques productos-amazon a banda-full → fondo oscuro */
.productos-amazon.banda-full {
  --banda-bg: #0b1120;
  color: #f9fafb;
}

/* grid de guías básicas: gris suave */
.banda-guias-basicas {
  --banda-bg: #f5f5f5;
  color: var(--text-main);
}

/* grid productos Amazon + CTA mejores mandolinas: amarillo suavito */
.banda-guias-amazon {
  --banda-bg: #fefce8;
}

/* seguridad: fondo oscuro */
.banda-seguridad {
  --banda-bg: #020617;
}

/* CTA blog: amarillo suavito */
.banda-blog-cta {
  --banda-bg: #fefce8;
}

section.ventajas.banda-full {
  --banda-bg: #fefce8;
}

.grupo2.banda-full {
  --banda-bg: #fefce8;
}

.bloque-final.banda-full {
  --banda-bg: #020617;
  color: #f9fafb;
}


/* =============================================================
   CSS PÁGINA TIPOS (se mantiene para más adelante)
   ============================================================== */

.intro-inicio-tipos {
  position: relative;
  padding: 4rem 0;
}

.intro-inicio-tipos::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #020617;
}

.intro-inicio-tipos::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: radial-gradient(circle at top left, rgba(149, 211, 190, 0.45) 0, transparent 60%);
}

.intro-inicio-tipos > * {
  position: relative;
  z-index: 1;
}

.page-tipos .intro-tipos,
.page-tipos .intro-tipos h1,
.page-tipos .intro-tipos p {
  color: #ffffff;
}

.page-tipos .tipo-card,
.page-tipos .tipo-card h2,
.page-tipos .tipo-card p {
  color: #222222;
}

/* móvil tipologías */
@media (max-width: 768px) {
  .intro-inicio-tipos {
    padding: 3rem 0;
  }
}


/* ===========================
   PÁGINA: TIPOS DE MANDOLINAS
   =========================== */

.page-tipos .intro-tipos {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.page-tipos .intro-tipos h1 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* grid de tipos */
.page-tipos .tipos-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* tarjetas de tipo */
.page-tipos .tipo-card {
  background-color: #ffffff;
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
}

/* en escritorio, tres columnas */
@media (min-width: 900px) {
  .page-tipos .tipos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ===========================
   PÁGINA TIPOS – BLOQUE ELECCIÓN RÁPIDA
   =========================== */

.page-tipos .page-tipos-eleccion {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.page-tipos .page-tipos-eleccion h2 {
  text-align: left;
  margin-bottom: 0.75rem;
}

.page-tipos .page-tipos-eleccion > p {
  margin-bottom: 2rem;
}

/* Grid de tarjetas */
.page-tipos .eleccion-grid {
  display: grid;
  gap: 1.5rem;
}

/* Tarjetas individuales */
.page-tipos .eleccion-card {
  background-color: #ffffff;
  border-radius: 0.9rem;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.page-tipos .eleccion-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.page-tipos .eleccion-subtitulo {
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
}

/* Lista dentro de la tarjeta */
.page-tipos .eleccion-card ul {
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}

.page-tipos .eleccion-card li {
  margin-bottom: 0.4rem;
}

/* Escritorio: 3 columnas */
@media (min-width: 900px) {
  .page-tipos .eleccion-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}






/* ===========================
   AJUSTES COMPACTOS TARJETAS AMAZON
   =========================== */

.producto-amazon img {
    height: 120px;
    object-fit: contain;
    background: rgba(2, 6, 23, 0.04);
    padding: 0.35rem;
}

@media (max-width: 899px) {
    .producto-amazon img {
        height: 110px;
    }
}




/* Quita el “estiramiento” del texto que crea hueco */
.producto-amazon p {
    flex-grow: 0;
    margin-bottom: 0.45rem;
}

/* Bullets (por si los tienes como <ul> o como <p class="producto-amazon__bullets">) */
.producto-amazon ul,
.producto-amazon .producto-amazon__bullets {
    margin-top: 0.35rem;
    margin-bottom: 0.6rem;
}

/* Mantén el botón abajo sin crear huecos raros */
.producto-o9xo a.btn-amazon {
    margin-top: auto;
}