@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{
  --color-primario:#ad1457;
  --color-secundario:#555;
  --color-fondo:#fff;
  --color-acento:#ff69b4;
  --color-borde:#e9e9e9;
  --sombra:0 .5rem 1.5rem rgba(0,0,0,.08);
  --radius:12px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ width:100%; max-width:100%; overflow-x:hidden; }
img, video, iframe{ max-width:100%; height:auto; display:block;}
main h1{font-size:3.2rem;line-height:1.25;color:#C2185B;margin:0 0 1rem}
main h2{font-size:2.4rem;margin:0 0 1rem;color:#C2185B}
main h3{font-size: 2.0rem;margin: 1.6rem 0 0.8rem;color:#C2185B;}
main h4{font-size: 1.8rem;margin: 1.6rem 0 0.8rem;color:#C2185B;}
main p{font-size:1.6rem;margin:0 0 1.2rem}
main ul,main ol{padding-left:2rem;margin:0 0 1.2rem}
main li{font-size:1.6rem;margin:.4rem 0}

/* ====== INICIO / HERO ====== */
.inicio{ display:flex; flex-direction:column; align-items:center; text-align:center;padding:4rem 2rem; background:linear-gradient(120deg,#ffeaf3,#fff); border-radius:var(--radius); box-shadow:var(--sombra); margin:2rem 0; }
.titulo-inicio{ font-size:clamp(2.4rem, 6vw, 5rem); }
.inicio-imagen{ margin-bottom:2rem;}
.inicio-imagen img{width:100%; max-width:720px; border-radius:var(--radius); }
.inicio-imagen figcaption{ margin-top:8px; font-size:1.4rem; color:#b76e79; }
.inicio-contenido{  max-width:800px;}

.tabs-h5p{ width:100%; max-width:900px; margin:1.8rem auto 0 auto; background:#fff; border-radius:22px; box-shadow:0 10px 28px rgba(0,0,0,0.08); padding:1.2rem; border:1px solid rgba(0,0,0,0.06);}

/* Oculta radios */
.tabs-h5p input[type="radio"]{position:absolute; left:-9999px;}

/* Barra de tabs */
.tabs-h5p .tab-btn{ display:none; align-items:center; justify-content:center; padding:0.9rem 1.2rem; margin:0.3rem 0.35rem 0.8rem 0; border-radius:999px; cursor:pointer; font-weight:700; font-size:1.4rem; 
  color:var(--color-primario); background:#ffeaf3; border:1px solid rgba(0,0,0,0.06); transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}

.tabs-h5p .tab-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.08);}

/* Estado activo */
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label{ background:var(--color-acento); color:#fff; box-shadow:0 8px 18px rgba(0,0,0,0.12); border-color:transparent;}

/* Paneles */
.tab-panels{ position:relative; overflow:hidden; border-radius:18px; padding:1rem 1rem 0.6rem 1rem; background:linear-gradient(120deg,#fff,#fff7fb); border:1px solid rgba(0,0,0,0.06);}

/* Todos ocultos por default */
.tab-panel{ display:none; animation:fadeSlide .28s ease; text-align:left; /* mejor lectura */}

@keyframes fadeSlide{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* Muestra panel según tab */
#tab1:checked ~ .tab-panels .panel1{display:block;}
#tab2:checked ~ .tab-panels .panel2{display:block;}
#tab3:checked ~ .tab-panels .panel3{display:block;}

/* Tipografía dentro */
.tab-panel p, .tab-panel li{ font-size:1.55rem; line-height:1.6; color:#333;}
.subtitulo{ margin:0.2rem 0 0.8rem 0; font-weight:700; color:#6a1b4d;}
.tab-panel ul{ margin:0.6rem 0 0.2rem 0; padding-left:1.2rem;}
.tab-panel li{ margin:0.45rem 0; }
.nota{ background:#fff; border-left:5px solid var(--color-acento); padding:0.9rem 1rem;  border-radius:14px;  margin:0 0 1rem 0;}
.alerta{ margin-top:1.1rem; padding:1rem 1.1rem; border-radius:16px; background:#ffe5ec; color:#b00020; font-weight:800; text-align:center; border:1px solid rgba(176,0,32,0.18);}

/* Responsive: tabs en 2 filas sin romper */
@media (max-width:600px)
{ .tabs-h5p .tab-btn{   width:100%;   margin-right:0;  }}

/* ====== Tabs con color por pestaña ====== */
.tabs-h5p{ --tab-acento: var(--color-acento);  --tab-fondo: #fff7fb;  --tab-borde: rgba(0,0,0,0.06);}

/* Iconos */

/* Botones (más tipo “plataforma”) */
.tabs-h5p .tab-btn{ background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--color-primario);  position:relative;}

/* Panel toma el color activo */
.tab-panels{  border:2px solid var(--tab-acento); background:linear-gradient(120deg,#fff,var(--tab-fondo)); transition:border-color .25s ease, background .25s ease;}

/* Nota y alerta con acento activo */
.nota{ border-left:6px solid var(--tab-acento);}
.alerta{ border:1px solid color-mix(in srgb, var(--tab-acento) 35%, transparent);}

/* Estados activos por tab: cambia variables */
#tab1:checked ~ .tab-panels{ --tab-acento:#d81b60; --tab-fondo:#fff0f6; }  /* rosa fuerte */
#tab2:checked ~ .tab-panels{ --tab-acento:#8e24aa; --tab-fondo:#f8f0ff; }  /* lila */
#tab3:checked ~ .tab-panels{ --tab-acento:#2e7d32; --tab-fondo:#f0fff4; }  /* verde suave */

/* Botón activo toma el acento */
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label{ background:var(--tab-acento); color:#fff; border-color:transparent;}

/* Indicador inferior tipo H5P */
.tabs-h5p .tab-btn::after{ content:""; position:absolute; bottom:-6px; left:12px; right:12px; height:3px; border-radius:99px; background:var(--tab-acento); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}

#tab1:checked + label::after,
#tab2:checked + label::after,
#tab3:checked + label::after{ transform:scaleX(1);}

/* Suaviza cambio de panel */
.tab-panel{ animation:fadeSlide .35s cubic-bezier(.4,0,.2,1);}
.tab-icon{ width:22px; height:22px; display:inline-flex; flex-shrink:0;}
.tab-icon svg{ width:100%; height:100%; max-width:22px; max-height:22px; display:block;}

/* ====== INVESTIGADORAS ====== */
.investigadoras{padding:4rem 2rem;background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);margin:3rem 0;text-align:center}
.investigadoras h1{font-size:2.6rem;color:var(--color-primario);margin-bottom:1rem}
.investigadoras .intro{font-size:1.6rem;margin:0 auto 3rem;max-width:800px;line-height:1.6}
.perfil-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2rem; align-items:stretch; }
.perfil-card {background:#fffafc; border:1px solid var(--color-borde); border-radius:var(--radius); padding:2rem; box-shadow:var(--sombra); text-align:center;}
.perfil-card img{width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid var(--color-acento); display: block; margin: 0 auto 1rem auto; }
.perfil-card h2{font-size:1.8rem; color:var(--color-primario); margin:.5rem 0;text-align:center; }
.perfil-card p{font-size:1.4rem;line-height:1.5;color:var(--color-secundario)}
.superviviente{display:inline-block;margin-top:1rem;padding:.4rem 1rem;background:#ff69b4;color:#fff;border-radius:50px;font-size:1.2rem;font-weight:600}
.perfil-card:hover img{ transform:scale(1.05); box-shadow:0 8px 18px rgba(0,0,0,0.15);}

@media (max-width: 1024px){  .perfil-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }}
@media (max-width: 600px){ .perfil-grid{ grid-template-columns:1fr; }}

/* ====== GALERÍA ====== */
.galeria{padding:4rem 2rem;background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);margin:3rem 0}
.galeria h1{font-size:2.4rem;color:#111;margin-bottom:1rem}
.galeria h2{font-size:1.8rem;color:var(--color-primario);margin:2rem 0 1rem}
.galeria .intro{font-size:1.4rem;color:var(--color-secundario)}
.galeria-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.foto{background:#fafafa;border:1px solid var(--color-borde);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sombra)}
.foto img{display:block;width:100%;height:200px;object-fit:cover}
.foto figcaption{padding:.8rem 1rem;font-size:1.2rem;color:#333}



/*FORMATO DE REGISTRO Y LOGIN*/
.alert {margin-top: 12px; padding: 10px; border: 1px solid #ddd;border-radius: 8px; display: none; }
.alert.success { border-color: #2e7d32; }
.alert.error { border-color: #c62828; }

/* Contenedor del botón (centrado robusto) */
.contenedor-boton-crear { display: flex;justify-content: center;margin-top: 24px; }
    
/* Botón Crear Cuenta */
.btn-crear {padding: 1.1rem 3rem; font-size: 1.15rem; font-weight: 700; border-radius: 14px;border: none; background-color: #d6d6d6; color: #666; cursor: not-allowed; transition: all 0.25s ease;min-width: 240px;}
    
/* Estado habilitado */
.btn-crear.activo { background-color: #e91e63;  color: #fff;cursor: pointer;box-shadow: 0 6px 14px rgba(233, 30, 99, 0.35);}
    
/* Hover solo cuando está activo */
.btn-crear.activo:hover {background-color: #d81b60; transform: translateY(-1px); }
    
/* Estado deshabilitado real */
.btn-crear:disabled {  opacity: 0.75; }
.consent-group { margin-top: 12px;}
.check-item { display: flex;align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 16px; cursor: pointer;}
.steps{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;flex-wrap:nowrap;}
.steps-label{font-weight:800;color:#880E4F;font-size:16px;white-space:nowrap;}
.steps-dots{display:flex;gap:8px;flex:0 0 auto;}
.acciones{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.btn-secundario{padding:1.05rem 2.2rem;border-radius:14px;border:2px solid rgba(194,24,91,.35);background:#fff;color:#880E4F;font-weight:800;cursor:pointer;}
.dot{ width:12px; height:12px; border-radius:999px; border:2px solid #C2185B; background:#FFF5F8;}
.dot.active{ background:#C2185B;}   
.consent-card{ margin-top:14px; padding:14px 14px 6px; border:2px solid rgba(194,24,91,0.35); background:#FFF5F8; border-radius:12px;}
.consent-card h3{ margin:0 0 6px; color:#880E4F;}
.check-item{ display:flex; align-items:flex-start; gap:12px; padding:10px; margin:10px 0; border:2px solid rgba(194,24,91,0.25); border-radius:12px; background:#fff; cursor:pointer;}
.check-item span{ color:#880E4F; font-weight:700; line-height:1.3;}
.saludo-usuario { margin: 16px auto 24px auto; padding: 14px 22px; max-width: 720px; text-align: center; font-size: 1.6rem; font-weight: 700; color: #e91e63; background: rgba(233, 30, 99, 0.08); border-radius: 16px; display: none;}
.grid-semanas{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:16px;}
.tarjeta-semana{ display:block; padding:18px; border:1px solid #eee; border-radius:16px; background:#fff; text-decoration:none; color:#222; box-shadow: 0 6px 14px rgba(0,0,0,0.06);}
.tarjeta-semana h3{ margin:0 0 6px 0; }
.tarjeta-semana p{ margin:0 0 10px 0; color:#555; font-size:0.95rem; line-height:1.35; }
.badge{  display:inline-block; padding:6px 10px; border-radius:999px; font-size:0.8rem; font-weight:700;}
.badge-demo{ color:#e91e63; background: rgba(233,30,99,0.10); border:1px solid rgba(233,30,99,0.25);}
.badge-lock{ color:#666; background:#f2f2f2; border:1px solid #e3e3e3;}

/* Campos de texto, número, email, password y select */
input,select,textarea { width: 100%;padding: 14px 16px;font-size: 16px;border: 2px solid #C2185B; border-radius: 10px;background-color: #FFFFFF;box-sizing: border-box; margin-top: 6px;margin-bottom: 18px;outline: none;}

/* Estado cuando el usuario da clic */
input:focus,select:focus,textarea:focus { border: 3px solid #880E4F; box-shadow: 0 0 6px rgba(136, 14, 79, 0.3);}

/* Placeholder más visible */
input::placeholder {color: #6A1B9A; opacity: 0.7;}

/* Labels más claros */
label {  font-size: 15px;  font-weight: 600;color: #880E4F;}
input, select {  min-height: 48px;}
input,select {  background-color: #FFF5F8;}

/*FORMATO DE PERFIL*/
.perfil{ position: relative; margin-left: auto;}
.perfil-btn{ width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 999px; display: grid; place-items: center;}
.perfil-img{ width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(233,30,99,0.25); display: none; }
.perfil-inicial{width: 44px;height: 44px;border-radius:999px; display:none;align-items:center; justify-content: center;font-weight: 800;font-size: 1.05rem; color: #fff; background: #e91e63; border: 2px solid rgba(233,30,99,0.35);}
.perfil-menu{ position: absolute; right: 0; top: 54px; min-width: 180px; background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 10px 20px rgba(0,0,0,0.08); padding: 8px;  display: none; z-index: 50;}
.perfil-menu.open{ display: block; }
.perfil-item{ width: 100%; display: block; padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font-weight: 600; color: #333;}
.perfil-item:hover{ background: rgba(233,30,99,0.08);}
.perfil-item.danger{ color: #b00020;}
.perfil-item.danger:hover{ background: rgba(176,0,32,0.08);}

/* ====== AJUSTE FINAL PERFIL (primer nombre como chip) ====== */

/* Asegura alineación del header */
.header{ display:flex; align-items:center; gap:12px;}

/* Perfil al extremo derecho */
.perfil{ margin-left:auto; position:relative;
}

/* Botón del perfil: permite texto */
.perfil-btn{ width:auto; height:44px; display:flex;   align-items:center; justify-content:center; gap:10px;}

/* Chip con primer nombre */
.perfil-inicial{width:auto;height:44px; padding:0 14px;border-radius:999px;display:none;align-items:center;justify-content:center;font-weight:800;font-size:1.0rem;color:#fff;background:#e91e63;border:2px solid rgba(233,30,99,0.35);
max-width:160px;  white-space:nowrap;  overflow:hidden;  text-overflow:ellipsis;}

@media (max-width: 1024px){
  .header{
    gap:10px;
  }

  .perfil-inicial{
    max-width:120px;
  }
}

/*FOOTER PROYECTO*/
.onco-footer .footer-logos{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap;  margin-bottom:10px;}
.onco-footer .footer-logos .logo{ object-fit:contain; width:auto; max-width:100%;}
.onco-footer .footer-logos .logo-principal{  height:80px;}
.onco-footer .footer-logos .logo-financia{ height:40px;}
.onco-footer .logo-oncology{  height:45px;  opacity:0.95; }
.onco-footer .footer-logos .logo-secundario{ height:28px; opacity:0.95;}
.onco-footer{ text-align:center; padding:2rem; color:#777;}
.onco-footer hr{ border:0; border-top:1px solid #eee; margin:16px auto; max-width:900px;}
.onco-footer .footer-texto{ margin:10px auto 0; max-width:900px; line-height:1.4;}
.onco-carousel{ position: relative; margin: 12px 0 24px;}
.onco-carousel .carousel-viewport{ overflow: hidden; border-radius: var(--radius);}
.onco-carousel .carousel-track{ display: flex; transition: transform 280ms ease; will-change: transform;}
.onco-carousel .carousel-item{  flex: 0 0 100%; margin: 0;}

/* Para NO recortar verticalmente */
.onco-carousel .carousel-item img{ width: 100%; height: 360px; object-fit: contain; background: #fff; display: block;}
@media (max-width: 520px){ .onco-carousel .carousel-item img{ height: 240px; }}
.onco-carousel .carousel-btn{ position: absolute;top: 50%;transform: translateY(-50%);width: 42px;height: 42px;border: 1px solid #eee;border-radius: 999px;background: #fff;box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  cursor: pointer; font-size: 22px; font-weight: 700; line-height: 1; color: #333; display: grid; place-items: center; z-index: 2;}
.onco-carousel .carousel-btn.prev{ left: 10px; }
.onco-carousel .carousel-btn.next{ right: 10px; }

/* Figcaption centrado SOLO en carrusel */
.onco-carousel .foto{ text-align: center;}
.onco-carousel .foto figcaption{ text-align: center; margin-top: 8px;}

/* Indicadores (puntitos) */
.carousel-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 10px;}
.carousel-dots button{ width: 10px; height: 10px; border-radius: 50%; border: 0; background: #ddd; cursor: pointer; padding: 0; transition: background .25s ease, transform .2s ease;}
.carousel-dots button.active{ background: var(--color-acento); transform: scale(1.2);}

/*Videos Fisioterapia*/
.contenedor-semana { padding: 20px;}
.bloque-semana { max-width: 1100px; margin: 0 auto;}
.texto-semana { margin-top: 8px; opacity: 0.9;}
.videos-grid {  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px;}
.video-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 14px;}
.video-desc { margin-top: 10px; font-size: 0.95rem; opacity: 0.9;}
.video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.35); margin-top: 10px;}
.video-wrapper iframe { width: 100%; height: 100%; border: 0;}
.video-bloqueado { display: flex; align-items: center; justify-content: center;}
.overlay-bloqueo {position: absolute;inset: 0;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;padding: 16px;text-align: center;background: rgba(0,0,0,0.55);backdrop-filter: blur(2px);}
.overlay-titulo {font-size: 1.05rem; margin: 0;}
.overlay-texto { margin: 0; font-size: 0.95rem; opacity: 0.95;}
.overlay-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px;}
.btn-video { display: inline-block; padding: 10px 14px; border-radius: 10px;text-decoration: none;border: 1px solid rgba(255,255,255,0.25);}
.btn-video:hover { transform: translateY(-1px);}
.btn-secundario { opacity: 0.95;}

.check-item input[type="checkbox"]{width:22px;height:22px;padding:0;margin:0; min-height:0;border-radius:4px;box-shadow:none;background:#fff;flex:0 0 auto;accent-color:#C2185B; transform:none;}

body{font-size:16.5px;line-height:1.5;}
.consent-note{font-size:15.5px;line-height:1.5;}


/* =========================
   LAYOUT CÁNCER (LIMPIO)
   ========================= */
.layout-cancer{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start; /* alinea arriba */
}

.contenido-principal{
  min-width: 0;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(173,20,87,0.14);
  border-radius: 18px;
  padding: 18px;
}

/* =========================
   ASIDE CUIDATIPS (LIMPIO)
   ========================= */
.cuidatips-aside{
  background:#fff;
  border: 1px solid rgba(173,20,87,0.22);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(173,20,87,0.14);
  position: sticky;
  top: 100px;
  margin-top: 0; /* importante: NO bajar el aside */
}

.cuidatips-aside h2{
  font-size: 1.35rem;
  margin: 0 0 6px 0;
  color: var(--color-primario);
}

.cuidatips-aside .aside-sub{
  font-size: .98rem;
  color: #555;
  margin: 0 0 14px 0;
  line-height: 1.4;
}

/* =========================
   MINI VIDEOS (LIMPIO)
   ========================= */
.mini-videos{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mini-video{
  display:flex;
  gap:12px;
  align-items:center;
  border:none;
  background:#fdf2f7;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:.2s;
  text-align:left;
}

.mini-video:hover{ background:#ffe4ef; }

.mini-video img{
  width: 160px;
  height: 90px; /* 16:9 */
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.mini-title{
  font-size: 1rem;
  font-weight: 600;
  color:#3a0b22;
  line-height: 1.3;
}

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 1024px){
  .layout-cancer{ grid-template-columns: 1fr; }
  .cuidatips-aside{ position: relative; top:auto; }
}

.modal-content{
  max-height: 80vh;      /* limita altura */
  overflow-y: auto;      /* activa scroll vertical */
}

.modal-dialog{
  max-height: 90vh;
  display:flex;
  flex-direction:column;
}

/* ===== MENÚ RESPONSIVO CORREGIDO ===== */
.header,
header{
  position: relative;
}

@media (max-width: 1024px){
  .menu-toggle{
    display:inline-flex;
    position:relative;
    z-index:9999;
    flex-shrink:0;
  }

  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    background:#fff;
    padding:12px 16px;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    z-index:9998;
  }

  .main-nav.open{
    display:block;
  }

  .main-nav a{
    display:block;
    width:100%;
    padding:12px 0;
  }
}


:root {
      --color-primario: #ad1457;
      --color-secundario: #f50057;
    }

    .manual-book-container{
      max-width:1100px;margin:50px auto;padding:40px;
      background:linear-gradient(120deg,#ffeaf3,#ffffff);
      box-shadow:0 0 15px rgba(0,0,0,0.10);
      border-radius: 8px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .manual-book-container p,
    .manual-book-container li {text-align: justify;line-height: 1.7;color: #333;margin-bottom: 15px;}
    .manual-book-container h1 {text-align: center;color: var(--color-primario);font-size: 2.2rem; margin-bottom: 18px;border-bottom: 3px solid var(--color-primario);padding-bottom: 10px; }
    .manual-book-container h2 {color: var(--color-primario);margin-top: 28px;border-left: 5px solid var(--color-secundario);padding-left: 15px; }
    .manual-book-container h3 {color: #880e4f;margin-top: 18px;font-size: 1.2rem;}
    .manual-book-container a {color: var(--color-secundario);text-decoration: none; font-weight: bold;}
    .manual-book-container a:hover {text-decoration: underline;}
    .manual-book-container ul,
    .manual-book-container ol {padding-left: 30px;  margin-bottom: 20px;}
    .manual-book-container li strong {color: var(--color-primario);}

    /* Variables SOLO para cards de infografías (no toca el :root global) */
    .infogrid{
      --inf-bg-card:#ffffff;
      --inf-borde: rgba(0,0,0,0.08);
      --inf-sombra: 0 10px 25px rgba(0,0,0,0.08);
      --inf-radius: 14px;
    }
    .cancer-header{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-bottom:10px;
    }
    .cancer-header p{ margin:0; }

    .filtros{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:6px;
    }
    .chip{
      border:1px solid var(--borde);
      background:#fff;
      padding:8px 10px;
      border-radius:999px;
      font-size:.95rem;
      cursor:pointer;
      user-select:none;
    }
    .chip.active{
      border-color: var(--color-secundario);
      box-shadow: 0 0 0 3px rgba(245,0,87,0.12);
    }

    .infogrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap:18px;
      margin-top:18px;
    }
    .card{ min-height: 320px; }
    .card-media{ aspect-ratio: 16 / 9; }
    .card{
      background:var(--inf--bg-card);
      border:1px solid var(--inf--borde);
      border-radius: var(--inf--radius);
      overflow:hidden;
      box-shadow: var(--inf--sombra);
      display:flex;
      flex-direction:column;
      min-height: 260px;
    }
    .card-media{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 10;
      background: #ffeaf3;
      overflow:hidden;
    }
    .card-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .badge{
      position:absolute;
      left:10px;
      top:10px;
      background: rgba(255,255,255,0.92);
      border:1px solid var(--inf--borde);
      padding:6px 10px;
      border-radius:999px;
      font-size:.85rem;
    }
    .card-body{
      padding:14px 14px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }
    .card-title{
      margin:0;
      font-size:1.05rem;
      color:#3a0b22;
      text-align:left;
    }
    .card-desc{
      margin:0;
      color:#444;
      font-size:.95rem;
      line-height:1.5;
      flex:1;
      text-align:left;
    }
    .card-actions{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .btn{
      border:none;
      cursor:pointer;
      border-radius: 10px;
      padding:10px 12px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .btn.primary{
      background: var(--color-primario);
      color:#fff;
    }
    .btn.ghost{
      background:#fff;
      border:1px solid var(--borde);
      color:#111;
    }

    /* ===== MODAL BASE + FIX (DEFINITIVO) ===== */
    .modal{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,0.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
      z-index:9999;
    }
    .modal.open{ display:flex; }
    
    .modal-dialog{
      width:min(980px, 100%);
      background:#fff;
      border-radius: 16px;
      overflow:hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    
      max-height: 92vh;
      display:flex;
      flex-direction:column;
    }
    
    .modal-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 14px;
      border-bottom:1px solid rgba(0,0,0,0.08);
      flex:0 0 auto;
    }
    
    .modal-content{
      padding:12px;
      flex:1 1 auto;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .modal-content img{
      width:100%;
      height:auto;
      display:block;
      max-width:100%;
      border-radius:12px;
      border:1px solid rgba(0,0,0,0.08);
    }
    
    @media (max-width: 480px){
      .modal{ padding:10px; }
      .modal-content{ padding:8px; }
    }

    /* ===== CUIDATIPS (VIDEOS) ===== */
    .cuidatips{
      margin-top:30px;
      padding-top:18px;
      border-top: 2px dashed rgba(173,20,87,0.25);
    }
    .notice-lock{
      background: #fff3f7;
      border: 1px solid rgba(245,0,87,0.18);
      padding: 12px 14px;
      border-radius: 14px;
    }
    .hidden{ display:none !important; }

    .videogrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap:16px;
      margin-top:14px;
    }
    .vcard{
      background:#fff;
      border:1px solid rgba(0,0,0,0.08);
      border-radius:14px;
      overflow:hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      display:flex;
      flex-direction:column;
    }
    .vthumb{
      border:none;
      padding:0;
      margin:0;
      cursor:pointer;
      background:#ffeaf3;
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      overflow:hidden;
    }
    .vthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .vplay{
      position:absolute;
      left:12px;
      bottom:12px;
      background: rgba(255,255,255,0.92);
      border:1px solid rgba(0,0,0,0.12);
      border-radius:999px;
      padding:8px 12px;
      font-weight:700;
    }
    .vduration{
      position:absolute;
      right:12px;
      bottom:12px;
      background: rgba(0,0,0,0.75);
      color:#fff;
      padding:5px 8px;
      border-radius:8px;
      font-size:.85rem;
    }
    .vbody{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
    .vtitle{ margin:0; font-size:1.05rem; color:#3a0b22; text-align:left; }
    .vdesc{ margin:0; color:#444; font-size:.95rem; line-height:1.5; text-align:left; }

    .video-frame{
      width:100%;
      aspect-ratio: 16 / 9;
      border:0;
      border-radius:12px;
      overflow:hidden;
    }

    @media (max-width: 520px){
      .manual-book-container{ padding:22px; }
    }
    /* ===== FIX MODAL INFOGRAFÍAS (móvil y desktop) ===== */
    .modal-dialog{
      max-height: 92vh;
      display: flex;
      flex-direction: column;
    }
    
    .modal-top{
      flex: 0 0 auto;
    }
    
    .modal-content{
      flex: 1 1 auto;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px;
    }
    
    .modal-content img{
      width: 100%;
      height: auto;
      display: block;
      max-width: 100%;
    }
    
    @media (max-width: 480px){
      .modal{ padding: 10px; }
      .modal-content{ padding: 8px; }
    }
    
    a{ overflow-wrap:anywhere; word-break:break-word; }
    /* =========================================
   FIX DEFINITIVO INFOGRAFÍAS EN MÓVIL
   (ancho real + 1 columna + padding correcto)
   ========================================= */

/* 1) El contenedor grande no debe ahorcar en móvil */
@media (max-width: 600px){
  .manual-book-container{
    margin: 16px auto !important;
    padding: 16px !important;   /* antes 40px */
    border-radius: 14px;
  }
}

/* 2) Asegura que el contenido principal no genere overflow */
.contenido-principal{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 3) Grid: permite cards más pequeñas y fuerza 1 columna en móvil */
.infogrid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

@media (max-width: 600px){
  .infogrid{
    grid-template-columns: 1fr !important;
  }
}

/* 4) Evita que alguna card o media empuje el ancho */
.card, .card-media, .card-body{
  min-width: 0;
}
.card-media img{
  max-width: 100%;
}
.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.menu-toggle{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  padding:0;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}

.menu-toggle .bar{
  display:block;
  width:26px;
  height:3px;
  background: var(--color-primario);
  border-radius:2px;
}
.menu-toggle .bar{ transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.open .bar:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2){ opacity:0; }
.menu-toggle.open .bar:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.descarga-app{
  margin:25px 15px;
  padding:22px;
  background:#fff0f6;
  border-left:6px solid #c2185b;
  border-radius:14px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.descarga-app p{
  font-size:16px;
  line-height:1.4;
  margin-bottom:16px;
  color:#333;
  font-weight:500;
}

.btn-descargar-app{
  display:inline-block;
  background:#c2185b;
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
}

.btn-descargar-app:hover{
  background:#a3154b;
}

/* TARJETA DESCARGA APP (forzar estilo aunque esté en footer) */
#descargaApp{
  display:none;                /* el JS lo cambia a block en Android */
  margin:22px 14px;
  padding:20px 18px;
  background:#fff0f6 !important;
  border:1px solid #f0c9dd !important;
  border-left:6px solid #c2185b !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(0,0,0,0.12) !important;
}

#descargaApp p{
  margin:0 0 14px 0 !important;
  font-size:16px !important;
  line-height:1.35 !important;
  color:#333 !important;
  font-weight:600 !important;
}

/* Botón ancho tipo call-to-action */
#descargaApp .btn-descargar-app{
  display:block !important;
  width:100% !important;
  max-width:360px !important;
  margin:0 auto !important;
  text-align:center !important;
  background:#c2185b !important;
  color:#fff !important;
  padding:14px 18px !important;
  border-radius:12px !important;
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:17px !important;
}

.mini-video.upcoming{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  opacity:0.95;
  cursor:default;
  padding:12px;
}

.mini-video.upcoming .mini-info.top{
  width:100%;
}

.mini-video.upcoming .mini-title{
  display:block;
  font-size:1rem;
  font-weight:600;
  color:#8f1d4f;
  line-height:1.25;
  margin:0;
}

.mini-video.upcoming img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  object-fit:cover;
}

.mini-video.upcoming .mini-info{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mini-video.upcoming img{
    width:100%;
    border-radius:12px;
}

.recomendaciones-section{
    padding: 40px 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff7fb 0%, #fff 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin: 30px 0;
}

.recomendaciones-head{
    text-align: left;
    margin-bottom: 28px;
}

.recomendaciones-badge{
    display: inline-block;
    background: #f7d6e6;
    color: #a0175b;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.recomendaciones-head .fisio-h5p__title{
    margin-bottom: 12px;
    color: #b31263;
    font-size: 2.5rem;
    line-height: 1.2;
}

.recomendaciones-head .fisio-h5p__sub{
    max-width: 950px;
    color: #555;
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.recomendaciones-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.reco-card{
    background: #fff;
    border: 1px solid #f2d9e5;
    border-radius: 20px;
    padding: 22px 22px 22px 22px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.reco-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(176, 18, 99, 0.12);
    border-color: #e9b8cf;
}

.reco-icon{
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #fdebf3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.reco-card p{
    margin: 0;
    color: #444;
    line-height: 1.7;
    font-size: 1.5rem;
}

.recomendaciones-extra{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.nota-importante,
.cta-fisio{
    border-radius: 22px;
    padding: 22px;
}

.nota-importante{
    background: #fff4e8;
    border: 1px solid #f4d4a7;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.nota-icon{
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    background: #ffe2b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.nota-importante h3,
.cta-fisio h3{
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: #8f4f00;
}

.nota-importante p{
    margin: 0;
    color: #5f4b2f;
    line-height: 1.7;
}

.cta-fisio{
    background: linear-gradient(135deg, #c2186a 0%, #e63d8f 100%);
    color: #fff;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 14px 30px rgba(194, 24, 106, 0.22);
}

.cta-fisio__icon{
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.cta-fisio__content h3{
    color: #fff;
}

.cta-fisio__content p{
    margin: 0 0 16px 0;
    line-height: 1.7;
    color: rgba(255,255,255,0.96);
}

.cta-fisio__btn{
    display: inline-block;
    padding: 12px 22px;
    background: #fff;
    color: #c2186a;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-fisio__btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

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

@media (max-width: 600px){
    .recomendaciones-section{
        padding: 28px 16px;
        border-radius: 18px;
    }

    .recomendaciones-head .fisio-h5p__title{
        font-size: 1.7rem;
    }

    .reco-card{
        padding: 16px;
        border-radius: 18px;
    }

    .nota-importante,
    .cta-fisio{
        padding: 18px;
        border-radius: 18px;
    }
}

.tarjeta-mensaje{
    max-width:700px;
    margin:14px auto 18px auto;
    padding:16px 24px;
    border-radius:18px;
    background:linear-gradient(135deg,#fff1f7,#ffe6f1);
    border:1px solid #f3c6da;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-shadow:0 8px 18px rgba(176,18,99,0.12);
}

.mensaje-icon{
    font-size:1.5rem;
}

.tarjeta-mensaje p{
    margin:0;
    font-size:1.15rem;
    font-weight:600;
    color:#b31263;
    text-align:center;
}

.pie-imagen{
    text-align:center;
    margin-top:8px;
    color:#b31263;
    font-size:0.95rem;
}