/* =====================================================
RECETAS SALUDABLES 2.0
===================================================== */

:root{
--bg:#f8f6f2;
--surface:#fff;
--primary:#5d8a66;
--primary-dark:#42644b;
--primary-light:#edf6ee;
--text:#24342a;
--text-soft:#6b756e;
--border:#e6ebe4;
--shadow:0 12px 30px rgba(0,0,0,.06);
--radius:28px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;}
img{display:block;max-width:100%;}
button,input{font:inherit;}
.contenedor{width:min(1180px,92%);margin:auto;padding:28px 0 60px;}

.hero{
display:grid;
gap:40px;
background:linear-gradient(145deg,#fbfcf8 0%,#f2f8ef 45%,#e7f2e4 100%);
border-radius:36px;
padding:32px 24px 20px;
box-shadow:0 12px 40px rgba(40,60,40,.08);
overflow:hidden;
position:relative;
}
.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../img/hero-ilustracion.png");
    background-repeat:no-repeat;
    background-position: calc(100% + 25px) calc(100% + 10px);
    background-size:110%;

    opacity:.75;

    pointer-events:none;

    z-index:0;
    filter: blur(.2px);

}
.hero::before{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-80px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:rgba(184,210,183,.12);

    filter:blur(70px);

    z-index:0;

}
.hero>*{position:relative;z-index:2;}
.hero-etiqueta{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.8);

    color:#42644b;

    font-weight:700;

    letter-spacing:.12em;

    font-size:.88rem;

}
#contadorHero{

    padding-left:10px;

    border-left:1px solid rgba(66,100,75,.2);

    font-weight:600;

    letter-spacing:0;

    opacity:.8;

}
.hero h1{
font-family:"Fraunces",serif;
font-size:clamp(2.2rem,5.8vw,4rem);
line-height:1.02;
margin-bottom:20px;
}
.hero-descripcion{
    max-width:26ch;
    color:#5c665f;
    font-size:1rem;
    line-height:1.6;
    margin-bottom:0;
    margin-top:22px;
}
.hero-ilustracion{display:flex;justify-content:center;align-items:center;min-height:160px;margin-top:-70px;}
.circulo{width:150px;height:150px;border-radius:50%;background:#dcefdc;position:absolute;}
.emoji-plato{font-size:4.8rem;position:relative;}

.busqueda-home{margin:34px 0 26px;}
.busqueda-box{
display:flex;align-items:center;gap:14px;
background:#fff;border-radius:999px;
padding:18px 24px;
box-shadow:var(--shadow);
}
.buscador-recetas{width:100%;border:none;background:transparent;outline:none;font-size:1.05rem;}

.filtros-recetas{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
    margin-bottom:36px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.filtros-recetas{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:4px 2px 8px;

    margin-bottom:32px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}

.filtro-btn{

    border:none;

    background:#fff;

    border-radius:999px;

    padding:12px 18px;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:8px;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

    font-weight:600;

    white-space:nowrap;

}

.filtro-btn span{

    font-size:1rem;

    line-height:1;

}

.filtro-btn:hover{

    transform:translateY(-2px);

}

.filtro-btn.activo{

    background:var(--primary);

    color:#fff;

}
.cabecera-recetas{
display:flex;
justify-content:space-between;
align-items:end;
gap:20px;
margin-bottom:28px;
}
.cabecera-recetas h2{
font-family:"Fraunces",serif;
font-size:2.3rem;
}
.cabecera-recetas p{color:var(--text-soft);}
.contador-recetas{
background:#fff;
padding:12px 18px;
border-radius:999px;
box-shadow:var(--shadow);
color:var(--text-soft);
}

.grid-recetas{display:grid;gap:26px;}
.paginacion-recetas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:42px;}
.footer{text-align:center;margin-top:60px;color:var(--text-soft);}
.footer p{color:var(--primary-dark);font-weight:700;margin-bottom:6px;}

@media(min-width:768px){
.hero{grid-template-columns:1.2fr .8fr;align-items:center;}
.grid-recetas{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1100px){
.grid-recetas{grid-template-columns:repeat(3,1fr);}
}
:root {
  --fondo: #f6f4ee;
  --blanco: #ffffff;
  --verde-suave: #dfead7;
  --verde-medio: #8fbf7f;
  --verde-oscuro: #49614d;
  --texto: #2f3a2f;
  --texto-secundario: #647064;
  --sombra: 0 8px 24px rgba(38, 53, 39, 0.08);
  --radio-grande: 24px;
  --radio-medio: 18px;
  --radio-peque: 14px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  padding-bottom: 90px;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

.hero {
  background: linear-gradient(180deg, #dcead4 0%, #eaf3e5 100%);
  padding: 24px 16px 22px;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--verde-oscuro);
  font-weight: 700;
}

.hero h1{
    font-family:"Fraunces",serif;
    font-size:clamp(2.35rem,6vw,4rem);
    line-height:.95;
    margin-bottom:16px;
}

.subtitulo {
  margin: 10px 0 0;
  color: var(--texto-secundario);
  line-height: 1.5;
}

.buscador {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.buscador input {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 15px 16px;
  background: var(--blanco);
  box-shadow: var(--sombra);
  outline: none;
}

.buscador button {
  border: none;
  border-radius: 16px;
  padding: 15px 18px;
  background: var(--verde-medio);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.contenedor {
  padding: 18px 16px 24px;
}

.titulo-seccion {
  margin: 0 0 14px;
  font-size: 1.35rem;
}

.categorias,
.destacadas,
.consejos {
  margin-bottom: 28px;
}

.grid-categorias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.categoria-btn {
  background: var(--blanco);
  border: none;
  border-radius: var(--radio-medio);
  padding: 18px 14px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.categoria-btn:hover {
  transform: translateY(-2px);
}

.icono {
  font-size: 1.4rem;
}

.encabezado-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.filtro-activo {
  border: none;
  background: #edf4e9;
  color: var(--verde-oscuro);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
}

.recetas-grid {
  display: grid;
  gap: 18px;
}

.tarjeta-receta {
  background: var(--blanco);
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.imagen-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.imagen-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contenido-tarjeta {
  padding: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip {
  background: #edf4e9;
  color: var(--verde-oscuro);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.88rem;
}

.tarjeta-receta h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.tarjeta-receta p {
  margin: 0;
  color: var(--texto-secundario);
  line-height: 1.5;
}

.acciones-receta {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-principal,
.btn-secundario {
  border: none;
  border-radius: 14px;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.btn-principal {
  background: var(--verde-medio);
  color: white;
  flex: 1;
}

.btn-secundario {
  background: #eef2eb;
  color: var(--verde-oscuro);
}

.enlace-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lista-consejos {
  display: grid;
  gap: 14px;
}

.consejo {
  background: var(--blanco);
  border-radius: var(--radio-medio);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--sombra);
}

.consejo-icono {
  font-size: 1.5rem;
  line-height: 1;
}

.consejo h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.consejo p {
  margin: 0;
  color: var(--texto-secundario);
  line-height: 1.45;
}

.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e6e6e0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px 8px 12px;
}

.nav-btn {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: #768076;
  cursor: pointer;
  font-size: 0.95rem;
}

.nav-btn span {
  font-size: 0.78rem;
}

.nav-btn.activo {
  color: var(--verde-oscuro);
  font-weight: 700;
}

.oculta {
  display: none;
}

/* ===== DETALLE DE RECETA ===== */

.pagina-receta {
  background: var(--fondo);
  padding: 16px;
}

.detalle-receta {
  max-width: 900px;
  margin: 0 auto;
}

.volver {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--verde-oscuro);
  text-decoration: none;
  font-weight: 700;
}

.receta-completa {
  background: var(--blanco);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.detalle-imagen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.detalle-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detalle-contenido {
  padding: 20px 18px 24px;
}

.detalle-contenido h1 {
  margin: 10px 0 10px;
  font-size: 2rem;
  line-height: 1.1;
}

.intro-receta {
  margin: 0 0 20px;
  color: var(--texto-secundario);
  line-height: 1.6;
}

.bloque-receta {
  margin-top: 24px;
}

.bloque-receta h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.lista-ingredientes,
.lista-pasos {
  margin: 0;
  padding-left: 20px;
  color: var(--texto);
  line-height: 1.7;
}

.lista-ingredientes li,
.lista-pasos li {
  margin-bottom: 8px;
}

.tabla-nutricional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dato-nutricional {
  background: #f0f5ec;
  border-radius: 16px;
  padding: 14px;
}

.dato-nutricional .etiqueta {
  display: block;
  font-size: 0.9rem;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.acciones-detalle {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.acciones-detalle .btn-principal {
  flex: 1;
}

/* ===== TARJETA VISIBLE ===== */

.pagina-tarjeta {
  background: var(--fondo);
  padding: 16px;
}

.tarjeta-movil {
  max-width: 620px;
  margin: 0 auto;
}

.acciones-superiores-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.acciones-superiores-tarjeta .btn-principal {
  width: 100%;
}

.ficha-receta {
  background: var(--blanco);
  border-radius: 28px;
  padding: 22px 18px;
  box-shadow: var(--sombra);
}

.ficha-receta-pro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(143, 191, 127, 0.18), transparent 28%),
    linear-gradient(180deg, #fbfcf9 0%, #f4f8ef 100%);
  border: 1px solid rgba(73, 97, 77, 0.08);
}

.ficha-header-pro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.ficha-header-texto {
  flex: 1;
}

.ficha-etiqueta {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--verde-oscuro);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ficha-header-pro h1 {
  margin: 0 0 10px;
  font-size: 1.9rem;
  line-height: 1.05;
}

.ficha-subtitulo {
  margin: 0;
  color: var(--texto-secundario);
  line-height: 1.5;
}

.ficha-icono-plato {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: rgba(143, 191, 127, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  flex-shrink: 0;
}

.ficha-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}

.meta-item {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 16px;
  padding: 14px;
}

.meta-label {
  display: block;
  font-size: 0.9rem;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.ficha-bloque {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 20px;
  padding: 16px;
}

.ficha-bloque h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.ficha-bloque ul,
.ficha-bloque ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.ficha-bloque li {
  margin-bottom: 8px;
}

.ficha-consejo {
  background: linear-gradient(180deg, #eef6e8 0%, #e8f2e1 100%);
  border: 1px solid rgba(143, 191, 127, 0.28);
}

.ficha-consejo p {
  margin-bottom: 0;
  color: var(--texto-secundario);
}

.ficha-footer-pro {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 97, 77, 0.12);
}

.ficha-footer-pro strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--verde-oscuro);
}

.ficha-footer-pro p {
  margin: 0;
  color: var(--texto-secundario);
  font-size: 0.95rem;
}

/* ===== TARJETA SOLO EXPORTACIÓN ===== */

.export-wrap {
  position: fixed;
  left: -99999px;
  top: 0;
  pointer-events: none;
}

.tarjeta-exportable {
  width: 900px;
  background:
    radial-gradient(circle at top right, rgba(143, 191, 127, 0.16), transparent 20%),
    linear-gradient(180deg, #f5f2ea 0%, #eef4e8 100%);
  padding: 30px;
  color: #2f3a2f;
  font-family: Arial, sans-serif;
  display: none;
  border-radius: 34px;
  border: 1px solid rgba(73, 97, 77, 0.08);
}

.tarjeta-exportable.export-visible {
  display: block;
}

/* HERO */

.export-hero {
  background: linear-gradient(180deg, #fcfdfb 0%, #f1f6ec 100%);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 28px;
  padding: 22px 24px 20px;
  box-shadow: 0 8px 24px rgba(38, 53, 39, 0.05);
}

.export-hero-superior {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.export-sello {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(143, 191, 127, 0.16);
  color: #49614d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.export-icono {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: rgba(143, 191, 127, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}

.export-hero-texto h1 {
  margin: 0 0 10px;
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.export-subtitulo {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  color: #647064;
  max-width: 700px;
}
/* ==========================================
   HERO SECUNDARIO
========================================== */

.hero-secundario{

    background:linear-gradient(135deg,#f8fbf5,#eef5eb);

    border-radius:28px;

    padding:30px 30px;

    margin-bottom:28px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    position:relative;

    overflow:hidden;

}

.hero-secundario > *{

    position:relative;

    z-index:1;

}

.hero-secundario h1{

    margin:14px 0 12px;

    color:#355238;

    font-size:2rem;

    line-height:1.15;

}

.hero-secundario p{

    max-width:650px;

    color:#5d6b5c;

    line-height:1.6;

    margin:0;

}

.hero-secundario::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("img/patron-hojas.png") center/cover no-repeat;

    opacity:.08;

    pointer-events:none;

}

/* META */

.export-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 0 18px;
}

.export-meta-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 5px 16px rgba(38, 53, 39, 0.04);
}

.export-meta-item span {
  display: block;
  font-size: 17px;
  color: #647064;
  margin-bottom: 6px;
}

.export-meta-item strong {
  font-size: 24px;
}

/* CUERPO */

.export-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.export-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.export-bloque {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 5px 16px rgba(38, 53, 39, 0.04);
}

.export-bloque h2 {
  margin: 0 0 14px;
  font-size: 24px;
  color: #2f3a2f;
}

.export-bloque ul,
.export-bloque ol {
  margin: 0;
  padding-left: 28px;
  font-size: 19px;
  line-height: 1.75;
}

.export-bloque li {
  margin-bottom: 6px;
}

/* números de pasos un poco más marcados visualmente */
.export-bloque ol li::marker {
  font-weight: 700;
  color: #49614d;
}

/* MINI BLOQUE AUXILIAR */

.export-mini {
  background: linear-gradient(180deg, #f7fbf4 0%, #eef5e8 100%);
  border: 1px solid rgba(143, 191, 127, 0.22);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 5px 16px rgba(38, 53, 39, 0.03);
}

.export-mini-titulo {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #49614d;
}

.export-mini p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #647064;
}

/* CONSEJO */

.export-consejo {
  margin-top: 16px;
  background: linear-gradient(180deg, #edf6e6 0%, #e4f0dc 100%);
  border: 1px solid rgba(143, 191, 127, 0.32);
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: 0 5px 16px rgba(38, 53, 39, 0.03);
}

.export-consejo-titulo {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 700;
  color: #2f3a2f;
}

.export-consejo p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: #647064;
}

/* FOOTER */

.export-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 97, 77, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.export-footer-marca strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
  color: #49614d;
}

.export-footer-marca p {
  margin: 0;
  font-size: 17px;
  color: #647064;
}

.export-footer-tag {
  font-size: 15px;
  color: #7a857a;
  text-align: right;
}

/* ===== TABLET / ESCRITORIO ===== */

@media (min-width: 760px) {
  body {
    padding-bottom: 24px;
  }

  .contenedor {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
  }

  .hero {
    padding: 36px 24px 28px;
  }

  .hero-texto,
  .buscador {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .recetas-grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav-inferior {
    display: none;
  }

  .pagina-receta,
  .pagina-tarjeta {
    padding: 24px;
  }

  .detalle-contenido {
    padding: 28px;
  }

  .acciones-superiores-tarjeta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .acciones-superiores-tarjeta .btn-principal {
    width: auto;
  }

  .ficha-header-pro h1 {
    font-size: 2.2rem;
  }

  .ficha-icono-plato {
    width: 72px;
    height: 72px;
    font-size: 2.1rem;
  }
}

/* =========================================================
   TARJETA MÓVIL EXPORTABLE 1080x1350 (4:5)
   ========================================================= */

.preview-tarjeta-movil {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--sombra);
  margin-top: 12px;
}

.preview-imagen {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.preview-imagen img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.preview-texto {
  padding: 18px;
}

.preview-sello {
  display: inline-block;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf4e9;
  color: var(--verde-oscuro);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.preview-texto h1 {
  margin: 0 0 10px;
  font-size: 2rem;
  line-height: 1.05;
}

.preview-texto p {
  margin: 0;
  color: var(--texto-secundario);
  line-height: 1.5;
}

/* CONTENEDOR OCULTO */
.export-wrap {
  position: fixed;
  left: -99999px;
  top: 0;
  pointer-events: none;
}

/* TARJETA 1080x1350 */
.tarjeta-exportable-movil {
  width: 1080px;
  min-height: 1350px;
  background:
    radial-gradient(circle at top right, rgba(143, 191, 127, 0.16), transparent 20%),
    linear-gradient(180deg, #f6f4ee 0%, #eef4e8 100%);
  color: #2f3a2f;
  font-family: Arial, sans-serif;
  padding: 34px;
  border-radius: 34px;
  display: none;
  box-sizing: border-box;
}

.tarjeta-exportable-movil.export-visible {
  display: block;
}

/* HERO */
.movil-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 32px;
  overflow: hidden;
  margin-bottom: 24px;
}

.movil-hero-imagen {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.movil-hero-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.movil-sello {
  position: absolute;
  top: 22px;
  left: 22px;
  background: rgba(255,255,255,0.92);
  color: #49614d;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.movil-hero-texto {
  padding: 34px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.movil-hero-texto h1 {
  margin: 0;
  font-size: 74px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.movil-linea {
  width: 90px;
  height: 5px;
  border-radius: 999px;
  background: #8fbf7f;
  margin: 22px 0 24px;
}

.movil-hero-texto p {
  margin: 0;
  font-size: 28px;
  line-height: 1.45;
  color: #5f6b5f;
}

/* META */
.movil-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.movil-meta-item {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 24px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.movil-meta-icono {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #eef4e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.movil-meta-item span {
  display: block;
  font-size: 20px;
  color: #647064;
  margin-bottom: 6px;
}

.movil-meta-item strong {
  font-size: 26px;
  line-height: 1.1;
}

/* GRID PRINCIPAL */
.movil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.movil-columna-derecha {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.movil-bloque {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 28px;
  padding: 28px;
}

.movil-bloque h2 {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.2;
}

.movil-bloque ul,
.movil-bloque ol {
  margin: 0;
  padding-left: 28px;
  font-size: 21px;
  line-height: 1.7;
}

.movil-bloque li {
  margin-bottom: 10px;
}

.movil-bloque ol li::marker {
  font-weight: 700;
  color: #49614d;
}

.movil-mini {
  background: linear-gradient(180deg, #f5f9f1 0%, #eef5e8 100%);
  border: 1px solid rgba(143, 191, 127, 0.22);
  border-radius: 24px;
  padding: 18px 22px;
}

.movil-mini h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.movil-mini p {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  color: #5f6b5f;
}

/* CONSEJO */
.movil-consejo {
  margin-top: 22px;
  background: linear-gradient(180deg, #edf6e6 0%, #e5f0dd 100%);
  border: 1px solid rgba(143, 191, 127, 0.3);
  border-radius: 28px;
  padding: 24px 28px;
}

.movil-consejo h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

.movil-consejo p {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  color: #5f6b5f;
}

/* FOOTER */
.movil-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(73, 97, 77, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.movil-footer-marca strong {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
  color: #49614d;
}

.movil-footer-marca p {
  margin: 0;
  font-size: 16px;
  color: #647064;
}

.movil-footer-tag {
  font-size: 18px;
  color: #7a857a;
  text-align: right;
  max-width: 260px;
  font-style: italic;
}

/* =========================================================
   ACCIONES DE RECETA
   ========================================================= */

.acciones-receta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 26px;
}

.btn-secundario {
  border: 1px solid var(--borde-suave);
  background: #fff;
  color: var(--verde-oscuro);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-secundario:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra);
  background: #f8faf6;
}

/* =========================================================
   RECETA DETALLE / IMPRESIÓN
   ========================================================= */

.pagina-receta {
  padding-top: 24px;
  padding-bottom: 48px;
}

.receta-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 28px;
  align-items: start;
}

.receta-media {
  position: sticky;
  top: 24px;
}

.receta-imagen {
  width: 100%;
  display: block;
  border-radius: 28px;
  box-shadow: var(--sombra);
}

.receta-contenido h1 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}

.detalle-etiqueta {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #edf4e9;
  color: var(--verde-oscuro);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.detalle-subtitulo {
  margin: 0 0 24px;
  color: var(--texto-secundario);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
}

.detalle-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.detalle-meta-item {
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--sombra-suave, 0 6px 18px rgba(0,0,0,0.04));
}

.detalle-meta-label {
  display: block;
  color: var(--texto-secundario);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.detalle-meta-item strong {
  font-size: 1.15rem;
}

.detalle-bloque {
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 24px;
  padding: 22px 24px;
  margin-top: 18px;
  box-shadow: var(--sombra-suave, 0 6px 18px rgba(0,0,0,0.04));
}

.detalle-bloque h2 {
  margin-top: 0;
  margin-bottom: 14px;
}

.detalle-bloque ul,
.detalle-bloque ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.8;
}

.detalle-consejo {
  background: linear-gradient(180deg, #f3f8ee 0%, #edf6e6 100%);
}

/* =========================================================
   IMPRESIÓN / PDF
   ========================================================= */

@media print {
  body {
    background: #fff;
  }

  .site-header,
  .volver,
  .no-print,
  .export-wrap {
    display: none !important;
  }

  .contenedor {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .pagina-receta {
    padding: 0;
  }

  .receta-layout {
    display: block;
  }

  .receta-media {
    position: static;
    margin-bottom: 24px;
  }

  .receta-imagen {
    max-width: 720px;
    border-radius: 18px;
    box-shadow: none;
  }

  .receta-contenido h1 {
    font-size: 28pt;
  }

  .detalle-subtitulo {
    font-size: 12pt;
    max-width: none;
  }

  .detalle-meta {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 18px;
  }

  .detalle-meta-item,
  .detalle-bloque {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .detalle-bloque {
    margin-top: 14px;
  }
}

/* =========================================================
   RESPONSIVE RECETA
   ========================================================= */

@media (max-width: 900px) {
  .receta-layout {
    grid-template-columns: 1fr;
  }

  .receta-media {
    position: static;
  }

  .detalle-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   TARJETA MÓVIL EXPORTABLE V2 · UNA COLUMNA
   ========================================================= */

.tarjeta-exportable-movil-v2 {
  width: 1080px;
  min-height: 1350px;
  background:
    radial-gradient(circle at top right, rgba(143, 191, 127, 0.16), transparent 22%),
    linear-gradient(180deg, #f6f4ee 0%, #eef4e8 100%);
  color: #2f3a2f;
  font-family: Arial, sans-serif;
  padding: 30px;
  border-radius: 34px;
  box-sizing: border-box;
  display: none;
}

.tarjeta-exportable-movil-v2.export-visible {
  display: block;
}

/* FOTO HERO */
.tarjeta-v2-foto {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin-bottom: 24px;
  background: #dfe8d7;
}

.tarjeta-v2-foto img {
  width: 100%;
  height: auto;
  display: block;
}

.tarjeta-v2-sello {
  position: absolute;
  top: 22px;
  left: 22px;
  background: rgba(255,255,255,0.94);
  color: #49614d;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* CABECERA */
.tarjeta-v2-header {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 28px;
  padding: 28px 30px;
  margin-bottom: 20px;
}

.tarjeta-v2-header h1 {
  margin: 0 0 12px;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.tarjeta-v2-subtitulo {
  margin: 0;
  font-size: 28px;
  line-height: 1.45;
  color: #5f6b5f;
}

/* META */
.tarjeta-v2-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.tarjeta-v2-meta-item {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 24px;
  padding: 22px 24px;
}

.tarjeta-v2-meta-item span {
  display: block;
  font-size: 22px;
  color: #647064;
  margin-bottom: 8px;
}

.tarjeta-v2-meta-item strong {
  font-size: 30px;
  line-height: 1.1;
}

/* BLOQUES */
.tarjeta-v2-bloque {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(73, 97, 77, 0.08);
  border-radius: 28px;
  padding: 28px 30px;
  margin-bottom: 18px;
}

.tarjeta-v2-bloque h2 {
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.2;
}

.tarjeta-v2-bloque ul,
.tarjeta-v2-bloque ol {
  margin: 0;
  padding-left: 28px;
  font-size: 28px;
  line-height: 1.7;
}

.tarjeta-v2-bloque li {
  margin-bottom: 10px;
}

.tarjeta-v2-bloque ol li::marker {
  font-weight: 700;
  color: #49614d;
}

/* MINI BLOQUE */
.tarjeta-v2-mini {
  background: linear-gradient(180deg, #f5f9f1 0%, #eef5e8 100%);
  border: 1px solid rgba(143, 191, 127, 0.22);
  border-radius: 26px;
  padding: 22px 26px;
  margin-bottom: 18px;
}

.tarjeta-v2-mini h3 {
  margin: 0 0 10px;
  font-size: 30px;
}

.tarjeta-v2-mini p {
  margin: 0;
  font-size: 25px;
  line-height: 1.5;
  color: #5f6b5f;
}

/* CONSEJO */
.tarjeta-v2-consejo {
  background: linear-gradient(180deg, #edf6e6 0%, #e5f0dd 100%);
  border: 1px solid rgba(143, 191, 127, 0.3);
  border-radius: 28px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.tarjeta-v2-consejo h2 {
  margin: 0 0 12px;
  font-size: 32px;
}

.tarjeta-v2-consejo p {
  margin: 0;
  font-size: 26px;
  line-height: 1.5;
  color: #5f6b5f;
}

/* FOOTER */
.tarjeta-v2-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(73, 97, 77, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.tarjeta-v2-footer strong {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  color: #49614d;
}

.tarjeta-v2-footer p {
  margin: 0;
  font-size: 18px;
  color: #647064;
}

.tarjeta-v2-footer span {
  font-size: 18px;
  color: #7a857a;
  text-align: right;
  max-width: 280px;
  font-style: italic;
}

/* =========================================================
   HOME DINÁMICA / GRID DE RECETAS · VERSIÓN MÁS COMPACTA
   ========================================================= */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-subtitulo {
  margin: 8px 0 0;
  color: var(--texto-secundario);
  max-width: 56ch;
}

.pagina-home {
  padding-top: 28px;
  padding-bottom: 48px;
}

.hero-home {
  background:
    radial-gradient(circle at top right, rgba(143, 191, 127, 0.16), transparent 25%),
    linear-gradient(180deg, #f6f4ee 0%, #eef4e8 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 32px;
  padding: 28px 30px;
  margin-bottom: 28px;
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
}

.hero-home-texto h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
}

.hero-home-texto p:last-child {
  margin: 0;
  max-width: 64ch;
  color: var(--texto-secundario);
  line-height: 1.6;
}

.seccion-recetas {
  margin-top: 8px;
}

.seccion-encabezado {
  margin-bottom: 18px;
}

.seccion-encabezado h2 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.seccion-encabezado p {
  margin: 0;
  color: var(--texto-secundario);
}

.grid-recetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.card-receta {
  width: 100%;
  max-width: none;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .grid-recetas {
    grid-template-columns: 1fr;
  }
}

/* imagen más baja y controlada */
.card-receta-imagen-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8efe3;
}

.card-receta-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-receta-contenido {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-receta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card-receta-categoria {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: #edf4e9;
  color: var(--verde-oscuro);
  font-size: 0.82rem;
  font-weight: 700;
}

.card-receta-tiempo {
  color: var(--texto-secundario);
  font-size: 0.92rem;
}

.card-receta h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.05;
}

.card-receta p {
  margin: 0;
  color: var(--texto-secundario);
  line-height: 1.55;
  font-size: 1rem;
}

.card-receta-acciones {
  margin-top: 4px;
}

.card-receta-acciones .btn-principal {
  display: inline-flex;
  align-self: flex-start;
}

/* =========================================================
   BUSCADOR Y FILTROS HOME
   ========================================================= */

.bloque-busqueda {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.busqueda-wrap {
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
}

.busqueda-label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--verde-oscuro);
}

.buscador-recetas {
  width: 100%;
  border: 1px solid var(--borde-suave);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 1rem;
  background: #fcfcfa;
  color: var(--texto-principal);
  outline: none;
  box-sizing: border-box;
}

.buscador-recetas:focus {
  border-color: #8fbf7f;
  box-shadow: 0 0 0 4px rgba(143, 191, 127, 0.12);
}

.filtros-recetas{

    display:flex;

    flex-wrap:nowrap;

    overflow-x:auto;

    overflow-y:hidden;

    gap:10px;

    padding:10px 16px;

    padding-right:18px;

    margin-bottom:22px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}

.filtro-btn {
  border: 1px solid var(--borde-suave);
  background: #fff;
  color: var(--verde-oscuro);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.filtro-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
  background: #f8faf6;
}

.filtro-btn.activo {
  background: #49614d;
  color: #fff;
  border-color: #49614d;
}

.sin-resultados {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 24px;
  padding: 24px;
  color: var(--texto-secundario);
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
}

/* =========================================================
   PAGINACIÓN RECETAS
   ========================================================= */

.paginacion-recetas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.pagina-btn {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--borde-suave);
  background: #fff;
  color: var(--verde-oscuro);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pagina-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave, 0 8px 24px rgba(0,0,0,0.05));
  background: #f8faf6;
}

.pagina-btn.activa {
  background: #49614d;
  color: #fff;
  border-color: #49614d;
}
.hero-estadisticas{

    margin-top:20px;

}

.hero-estadisticas span{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    background:rgba(255,255,255,.7);

    border:1px solid rgba(93,138,102,.15);

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    color:#42644b;

    backdrop-filter:blur(8px);

}
.hero-texto{

    flex:1;

    max-width:335px;

}
.seccion-habito{

    margin:26px 0 34px;

}

.habito-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 20px;

    background:#f5faf4;

    border:1px solid rgba(95,140,105,.15);

    border-radius:24px;

}

.habito-icono{

    font-size:2rem;

    flex-shrink:0;

}

.habito-card h3{

    margin:0 0 8px;

    font-size:1.05rem;

    color:var(--primary);

    letter-spacing:-.3px;

}

.habito-card p{

    margin:0;

    color:var(--texto-secundario);

    line-height:1.6;

}

.intro-basicos{

    max-width:760px;

    margin:42px auto 36px;

    text-align:center;

}

.intro-basicos h2{

    margin:0 0 14px;

    font-size:1.8rem;

}

.intro-basicos p{

    margin:0;

    color:var(--texto-secundario);

    line-height:1.7;

}

.grid-basicos{

    display:grid;

    gap:18px;

    margin:34px 0 60px;

}

.basico-card{

    background:#fff;

    border-radius:24px;

    padding:22px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.basico-card:hover{

    transform:translateY(-4px);

}

.basico-icono{

    width:60px;

    height:60px;

    border-radius:16px;

    overflow:hidden;

    flex-shrink:0;

}

.basico-icono img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.basico-card h3{

    margin:0 0 10px;

    font-size:1.2rem;

}

.basico-card{

    background:#fcfbf7;

    border-radius:24px;

    padding:20px;

    box-shadow:var(--shadow);

    transition:.25s;

    overflow:hidden;

    border:1px solid rgba(89,119,93,.08);

}

.basico-toggle{

    width:100%;

    border:none;

    background:none;

    padding:0;

    display:grid;

    grid-template-columns:60px 1fr 34px;

    gap:16px;

    align-items:center;

    cursor:pointer;

    text-align:left;

}

.basico-contenido{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.basico-card.abierto .basico-contenido{

    max-height:2000px;

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid rgba(0,0,0,.08);

}

.flecha{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f7faf6;
    
    color:var(--primary);

    font-size:1.2rem;

    font-weight:600;

    transition: transform .25s ease;

}

.basico-card.abierto .flecha{

    transform:rotate(180deg);

}

.basico-resumen h3{

    margin:0 0 6px;

    color:var(--primary);

    font-size:1.25rem;

}

.basico-resumen p{

    margin:0;

    color:var(--texto-secundario);

    font-size:.96rem;

    line-height:1.45;

}

.basico-contenido h4{

    margin:20px 0 8px;

    color:var(--primary);

    font-size:1rem;

}

.basico-contenido ul{

    margin:8px 0;

    padding-left:20px;

}

.basico-contenido li{

    margin-bottom:6px;

}

.basico-bloque{

    margin-bottom:22px;

}

.basico-bloque:last-child{

    margin-bottom:0;

}

.basico-bloque h4{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    margin:0 0 14px;

    background:#eef5ed;

    border-radius:999px;

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

}

.basico-bloque p{

    margin:0;

    line-height:1.65;

    color:var(--texto-secundario);

}

.basico-bloque ul{

    margin:8px 0 0;

    padding-left:18px;

}

.basico-bloque li{

    margin-bottom:6px;

    color:var(--texto-secundario);

}

.chips-combina{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:10px;

}

.chips-combina span{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    background:#eef5ed;

    color:var(--primary);

    font-size:.92rem;

    font-weight:600;

}
/* ==========================================
   APRENDE - FAQ
========================================== */

.faq-aprende{

    margin-top:40px;

}

.faq-aprende details{

    background:#ffffff;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid transparent;

    box-shadow:0 3px 10px rgba(0,0,0,.05);

    transition:
        box-shadow .25s,
        border-color .25s;

}

.faq-aprende details:hover{

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.faq-aprende details[open]{

    border-color:#d8e8d2;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.faq-aprende summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 22px;

    cursor:pointer;

    list-style:none;

    font-size:1.05rem;

    font-weight:600;

    color:#486247;

}

.faq-aprende summary::-webkit-details-marker{

    display:none;

}

.faq-aprende summary::after{

    content:"›";

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#eef5eb;

    color:#5f7d5b;

    font-size:1.6rem;

    font-weight:700;

    transition:.25s;

    flex-shrink:0;

}

.faq-aprende details[open] summary::after{

    transform:rotate(90deg);

    background:#dcebd6;

}

.faq-aprende p{

    margin:0;

    line-height:1.7;

    color:#555;

}

.faq-consejo{

    margin:32px 0 0;

    padding:16px 18px;

    background:#eef5eb;

    border-left:4px solid #7ca66b;

    border-radius:12px;

}

.faq-consejo p{

    padding:0;

    margin-top:8px;

}
.faq-respuesta{

    padding:0 22px 22px;

}

.faq-lista{

    list-style:none;

    padding:0;

    margin:20px 0;

}

.faq-lista li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

    line-height:1.5;

}

.basico-lista{
    list-style:none;
    padding:0;
}

.basico-lista li{

    display:flex;
    align-items:flex-start;
    gap:.6rem;
    margin-bottom:.6rem;

}

.basico-lista li::before{

    content:"✔";
    color:var(--verde-principal);
    font-weight:bold;
    flex-shrink:0;

}