/* ── Afrodita · identidad ───────────────────────────────────────────────────
   Paleta sacada de la hoja de personaje. No inventar colores fuera de esta lista. */
:root{
  --rosa:       #E8386F;
  --rosa-medio: #F07C9E;
  --rosa-suave: #FBDCE5;
  --oro:        #C9922E;
  --tinta:      #4A2433;
  --suave:      #96707F;

  --crema:      #F7F0E3;
  --papel:      #FFFBF5;
  --borde:      #F0D8DF;
  --sombra:     0 2px 10px rgba(74,36,51,.07);
  --sombra-alta:0 12px 32px rgba(232,56,111,.14);
  --radio:      18px;
}

*{ box-sizing:border-box; }

/* Sin esto, cualquier regla con display: se come el atributo hidden y las
   pantallas ocultas se ven igual. */
[hidden]{ display:none !important; }

body{
  margin:0;
  font-family:"Quicksand", system-ui, sans-serif;
  font-weight:500;
  color:var(--tinta);
  background:
    radial-gradient(1100px 520px at 50% -200px, #FFE6EE 0%, transparent 70%),
    var(--crema);
  min-height:100vh;
  line-height:1.65;
}

h1,h2,h3,.paso-titulo,.pregunta,.marca-texto{
  font-family:"Baloo 2", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
}

/* ── Barra de usuario ───────────────────────────────────────────────────────── */
.userbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px, 5vw, 48px);
  border-bottom:1px solid var(--borde); background:var(--papel);
  position:sticky; top:0; z-index:20;
}
.marca{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.marca-icono{ font-size:22px; }
.marca-texto{ font-size:24px; color:var(--rosa); }
.userbar-dcha{ display:flex; align-items:center; gap:12px; }
.userbar-email{ color:var(--suave); font-size:14px; }
@media (max-width:640px){ .userbar-email{ display:none; } }

main{ margin:0; padding:0; }
.pantalla{ max-width:920px; margin:0 auto; padding:clamp(24px, 5vw, 56px) clamp(16px, 5vw, 32px) 90px; }

/* ── Botones ────────────────────────────────────────────────────────────────── */
.btn, .btn-fantasma{
  font-family:"Quicksand", sans-serif; font-weight:700; font-size:16px;
  padding:13px 26px; border-radius:999px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn{ background:var(--rosa); color:#fff; border:none; box-shadow:0 6px 18px rgba(232,56,111,.28); }
.btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,56,111,.34); }
.btn:disabled{ opacity:.45; cursor:default; box-shadow:none; }
.btn-fantasma{ background:transparent; color:var(--rosa); border:2px solid var(--rosa-suave); }
.btn-fantasma:hover{ border-color:var(--rosa-medio); background:#fff; }
.btn-peq{ font-size:14px; padding:8px 18px; }
.botones{ display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
.botones-centro{ justify-content:center; }

/* ── Landing ────────────────────────────────────────────────────────────────── */
.landing-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px, 5vw, 56px); max-width:1180px; margin:0 auto;
}
.landing-hero{
  max-width:1180px; margin:0 auto; padding:clamp(20px,4vw,48px) clamp(16px,5vw,56px) clamp(40px,6vw,80px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center;
}
@media (max-width:860px){ .landing-hero{ grid-template-columns:1fr; text-align:center; } }

.etiqueta{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rosa); background:var(--rosa-suave);
  padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.landing-h1{ font-size:clamp(36px, 6vw, 62px); line-height:1.05; margin:0 0 18px; }
.landing-h1 em{ font-style:normal; color:var(--rosa); }
.landing-sub{ font-size:18px; color:var(--suave); margin:0 0 28px; max-width:52ch; }
@media (max-width:860px){ .landing-sub{ margin-inline:auto; } }
.landing-cta{ font-size:18px; padding:16px 34px; }
.landing-nota{ font-size:14px; color:var(--suave); margin:14px 0 0; }

.landing-escena{ margin:0; display:flex; justify-content:center; }
.personaje{ width:100%; max-width:420px; height:auto; filter:drop-shadow(0 18px 34px rgba(232,56,111,.22)); }
.flota{ animation:flota 6s ease-in-out infinite; }
@keyframes flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@media (prefers-reduced-motion:reduce){ .flota{ animation:none; } }

.landing-bloque{ max-width:900px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(16px,5vw,32px); }
.landing-bloque-alt{ max-width:none; background:var(--papel); border-block:1px solid var(--borde); }
/* Los hijos del bloque ancho se centran a 900px. Va con `.landing` delante para
   ganar en especificidad a `.landing-h2` y `.landing-pods`, que traen su propio
   margin y, si no, dejaban el título y la lista pegados a la izquierda en
   pantallas anchas (con el texto centrado dentro de su caja, que engaña). */
.landing .landing-bloque-alt > *{ max-width:900px; margin-inline:auto; }
.landing-bloque-alt-rosa{ max-width:none; background:var(--rosa-suave); }
.landing-h2{ font-size:clamp(26px, 3.6vw, 38px); margin:0 0 18px; }
.centro{ text-align:center; }
.landing-sub.centro{ margin-inline:auto; margin-bottom:34px; }
.landing-texto-largo p{ font-size:17px; color:var(--tinta); margin:0 0 16px; }

.landing-metodo{ display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
@media (max-width:760px){ .landing-metodo{ grid-template-columns:1fr; } }
.landing-metodo-fig{ margin:0; display:flex; justify-content:center; }
.personaje-caldero{ width:100%; max-width:250px; height:auto; }

.landing-pasos{
  max-width:1080px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(16px,5vw,32px);
  display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.landing-paso{ background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio); padding:26px; box-shadow:var(--sombra); }
.landing-paso-num{
  width:38px; height:38px; border-radius:50%; background:var(--rosa); color:#fff;
  display:grid; place-items:center; font-family:"Baloo 2",sans-serif; font-weight:700; margin-bottom:12px;
}
.landing-paso h3{ margin:0 0 8px; font-size:20px; }
.landing-paso p{ margin:0; color:var(--suave); font-size:15px; }

.landing-tipos{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }
.landing-tipo{ background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio); padding:20px; }
.landing-tipo-icono{ font-size:26px; }
.landing-tipo h3{ margin:6px 0 4px; font-size:19px; }
.landing-tipo p{ margin:0; color:var(--suave); font-size:14.5px; }

.landing-pods{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.landing-pods li{
  background:var(--papel); border:1px solid var(--borde); border-radius:14px;
  padding:15px 18px 15px 46px; position:relative; font-size:16px;
}
.landing-pods li::before{ content:"💗"; position:absolute; left:16px; top:14px; }

.landing-cita{ max-width:820px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
.personaje-guino{ width:200px; height:200px; border-radius:50%; box-shadow:0 10px 26px rgba(232,56,111,.20); }
.landing-cita blockquote{ margin:0; flex:1; min-width:260px; }
.landing-cita p{ font-size:20px; color:var(--tinta); margin:0 0 6px; }
.landing-cita strong{ font-family:"Baloo 2",sans-serif; font-size:28px; color:var(--rosa); }

.faq details{
  background:var(--papel); border:1px solid var(--borde); border-radius:14px;
  padding:14px 18px; margin-bottom:10px;
}
.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin:10px 0 0; color:var(--suave); }

.landing-cierre{ text-align:center; padding-bottom:100px; }

/* ── Tarjetas y pantallas ───────────────────────────────────────────────────── */
.pregunta{ font-size:clamp(28px, 5vw, 42px); margin:0 0 8px; text-align:center; }
.pregunta-sub{ text-align:center; color:var(--suave); margin:0 0 40px; font-size:17px; }

.catalogo{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); }
.tarjeta-tipo{
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:24px; cursor:pointer; box-shadow:var(--sombra); text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; font-family:inherit; color:inherit;
}
.tarjeta-tipo:hover:not(.no-disponible){ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--rosa-medio); }
.tarjeta-tipo.no-disponible{ opacity:.5; cursor:default; }
.tarjeta-tipo.destacado{ border-color:var(--rosa); border-width:2px; }
.tipo-icono{ font-size:30px; }
.tipo-nombre{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:21px; margin:8px 0 2px; }
.tipo-lema{ color:var(--rosa); font-size:14px; font-weight:600; margin-bottom:10px; }
.tipo-desc{ color:var(--suave); font-size:15px; margin:0; }
.tipo-badge{
  align-self:flex-start; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--rosa); color:#fff; padding:3px 10px; border-radius:999px; margin-bottom:6px;
}
.tipo-badge.gris{ background:var(--suave); }

.tarjeta{
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:clamp(22px,4vw,34px); box-shadow:var(--sombra);
}
.tarjeta-estrecha{ max-width:520px; margin:0 auto; }
.centro-tarjeta{ text-align:center; }
.centro-tarjeta .campo{ text-align:left; }
.puerta-cara{ width:130px; height:130px; border-radius:50%; margin:0 auto 14px; display:block; box-shadow:0 8px 20px rgba(232,56,111,.18); }

.paso-titulo{ font-size:clamp(24px,3.4vw,32px); margin:0 0 6px; }
.paso-sub{ color:var(--suave); margin:0 0 22px; }
.wizard-head{ text-align:center; margin-bottom:22px; }

.campo{ display:block; margin-bottom:20px; }
.campo-label{ display:block; font-weight:700; margin-bottom:5px; }
.campo-hint{ display:block; color:var(--suave); font-size:14px; margin-bottom:8px; }
.campo input[type=email], .campo input[type=text], .campo textarea, .campo select{
  width:100%; font-family:inherit; font-size:16px; color:var(--tinta);
  background:#fff; border:1.5px solid var(--borde); border-radius:12px; padding:12px 14px;
}
.campo textarea{ resize:vertical; min-height:88px; }
.campo textarea.alto{ min-height:170px; }
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline:none; border-color:var(--rosa-medio); }
.req{ color:var(--rosa); }

.opciones{ display:flex; flex-wrap:wrap; gap:9px; }
.opcion{
  font-family:inherit; font-size:15px; padding:9px 16px; border-radius:999px; cursor:pointer;
  background:#fff; border:1.5px solid var(--borde); color:var(--tinta);
}
.opcion.elegida{ background:var(--rosa); border-color:var(--rosa); color:#fff; font-weight:700; }

.alerta{ background:#FFF0F4; border:1px solid var(--rosa-suave); color:var(--rosa); border-radius:12px; padding:12px 14px; font-size:15px; }

.barra{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--suave); margin-bottom:24px; }
.barra-track{ flex:1; height:7px; background:var(--rosa-suave); border-radius:999px; overflow:hidden; }
.barra-fill{ height:100%; background:var(--rosa); border-radius:999px; transition:width .3s ease; width:0; }

/* ── Títulos ────────────────────────────────────────────────────────────────── */
.titulos-lista{ display:grid; gap:12px; margin-bottom:20px; }
.titulo-op{
  text-align:left; font-family:inherit; font-size:17px; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--borde); border-radius:14px;
  padding:16px 18px; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
}
.titulo-op:hover{ border-color:var(--rosa-medio); transform:translateY(-1px); }
.titulo-op.elegido{ border-color:var(--rosa); border-width:2px; background:#FFF4F7; }
.titulo-por{ display:block; color:var(--suave); font-size:14px; margin-top:6px; }
.titulo-op.favorita::before{ content:"🔥 Mi favorita"; display:block; color:var(--rosa); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.titulos-nota{ color:var(--suave); font-size:15px; text-align:center; margin-bottom:8px; }

/* ── Resultado ──────────────────────────────────────────────────────────────── */
.estado{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:26px; color:var(--suave); }
.estado-cara{ font-size:30px; animation:latido 1.4s ease-in-out infinite; }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
@media (prefers-reduced-motion:reduce){ .estado-cara{ animation:none; } }
.estado-texto{ font-size:17px; }

.progreso{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; }
.progreso-paso{ font-size:13px; padding:6px 14px; border-radius:999px; background:var(--papel); border:1px solid var(--borde); color:var(--suave); }
.progreso-paso.hecho{ background:var(--rosa-suave); border-color:var(--rosa-suave); color:var(--rosa); font-weight:700; }
.progreso-paso.ahora{ background:var(--rosa); border-color:var(--rosa); color:#fff; font-weight:700; }

.salida{ display:grid; gap:22px; }
.pieza{ background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden; }
.pieza-cabecera{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--borde); background:#FFF6F9; }
.pieza-titulo{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:19px; }
.pieza-cuerpo{ padding:22px; font-size:16px; line-height:1.7; }
.pieza-cuerpo > *:first-child{ margin-top:0; }
.pieza-cuerpo > *:last-child{ margin-bottom:0; }
.pieza-cuerpo p{ margin:0 0 14px; }
.pieza-cuerpo h2{ font-size:23px; margin:26px 0 10px; }
.pieza-cuerpo h3{ font-size:19px; margin:22px 0 8px; color:var(--rosa); }
.pieza-cuerpo h4{ font-size:17px; margin:18px 0 6px; }
.pieza-cuerpo ul,.pieza-cuerpo ol{ margin:0 0 14px; padding-left:22px; }
.pieza-cuerpo li{ margin-bottom:6px; }
.pieza-cuerpo hr{ border:none; border-top:1px solid var(--borde); margin:24px 0; }
.pieza-cuerpo strong{ color:var(--tinta); }
.pieza-cuerpo a{ color:var(--rosa); }

.pausa{ background:var(--rosa-suave); border-radius:var(--radio); padding:26px; text-align:center; margin-top:26px; }
.pausa h3{ margin:0 0 8px; font-size:22px; }
.pausa p{ margin:0 0 18px; color:var(--tinta); max-width:56ch; margin-inline:auto; }

.acciones{ display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.puerta-pie{ font-size:13.5px; color:var(--suave); margin:18px 0 0; }
.copiado{ color:var(--rosa); font-weight:700; font-size:14px; }

/* ── Footer legal ───────────────────────────────────────────────────────────
   Va en todas las pantallas, no solo en la landing. Los enlaces son fijos. */
.footer{
  border-top:1px solid var(--borde); background:var(--papel);
  padding:32px 24px; display:flex; flex-direction:column; align-items:center;
  gap:14px; text-align:center;
}
.footer-marca{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:15px; color:var(--rosa); }
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; max-width:900px; }
.footer-legal a{ color:var(--suave); font-size:14px; text-decoration:none; }
.footer-legal a:hover{ color:var(--rosa); text-decoration:underline; }
.footer-copy{ color:var(--suave); font-size:12px; opacity:.75; }

/* ── Pop-up de reseña ───────────────────────────────────────────────────────
   Sale una sola vez, cuando ya se ha llevado el paquete entero. */
.modal-fondo{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(74,36,51,.45); overflow-y:auto;
}
.modal{
  position:relative; background:var(--papel); border-radius:var(--radio);
  box-shadow:0 20px 50px rgba(74,36,51,.28); padding:clamp(24px,4vw,36px);
  max-width:480px; width:100%; text-align:center; margin:auto;
}
.modal-cerrar{
  position:absolute; top:10px; right:14px; background:none; border:none;
  font-size:28px; line-height:1; color:var(--suave); cursor:pointer; padding:4px 8px;
}
.modal-cerrar:hover{ color:var(--rosa); }
.modal-cara{ width:96px; height:96px; border-radius:50%; display:block; margin:0 auto 12px; }
.modal-titulo{ font-size:26px; margin:0 0 6px; }
.modal-sub{ color:var(--suave); margin:0 0 20px; font-size:15.5px; }
.modal .campo{ text-align:left; margin-bottom:14px; }
.modal .botones{ margin-top:18px; }

.estrellas{ display:flex; justify-content:center; gap:6px; margin-bottom:20px; }
.estrellas button{
  background:none; border:none; cursor:pointer; padding:0 2px;
  font-size:34px; line-height:1; color:var(--borde); transition:color .12s ease, transform .12s ease;
}
.estrellas button:hover{ transform:scale(1.12); }
.estrellas button.activa{ color:var(--rosa); }

.permiso{ display:flex; align-items:flex-start; gap:9px; text-align:left; font-size:14.5px; color:var(--suave); }
.permiso input{ margin-top:4px; accent-color:var(--rosa); }

.enlace{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:14.5px;
  color:var(--suave); text-decoration:underline; margin-top:14px;
}
.enlace:hover{ color:var(--rosa); }

/* ── Saldo y packs ──────────────────────────────────────────────────────────
   El saldo de verdad vive en el servidor. Esto solo lo enseña. */
.userbar-saldo{
  font-size:13px; font-weight:700; color:var(--rosa);
  background:var(--rosa-suave); padding:5px 13px; border-radius:999px; white-space:nowrap;
}
@media (max-width:520px){ .userbar-email{ display:none; } }

.aviso-saldo{
  background:var(--rosa-suave); border-radius:14px; padding:15px 20px;
  text-align:center; font-size:15.5px; margin-bottom:28px;
}
.aviso-saldo strong{ color:var(--rosa); }
.aviso-saldo button{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:inherit;
  font-weight:700; color:var(--rosa); text-decoration:underline; padding:0;
}

.planes{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); margin-bottom:20px; }
.plan{
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:26px 24px; text-align:center; box-shadow:var(--sombra);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.plan-destacado{ border:2px solid var(--rosa); box-shadow:var(--sombra-alta); }
.plan-badge{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--rosa); color:#fff; padding:3px 12px; border-radius:999px;
}
.plan-nombre{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:20px; }
.plan-precio{ font-family:"Baloo 2",sans-serif; font-weight:800; font-size:34px; color:var(--rosa); line-height:1.1; }
.plan-precio span{ font-size:15px; font-weight:600; color:var(--suave); }
.plan-detalle{ color:var(--suave); font-size:14.5px; margin-bottom:6px; }
.plan .btn, .plan .btn-fantasma{ margin-top:auto; }

.oferta-resena{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
  background:var(--rosa-suave); border-radius:var(--radio); padding:24px; margin-bottom:28px;
}
.oferta-cara{ width:92px; height:92px; border-radius:50%; }
.oferta-resena h3{ margin:0 0 6px; font-size:21px; }
.oferta-resena p{ margin:0 0 14px; color:var(--tinta); max-width:44ch; }
.oferta-resena > div{ flex:1; min-width:250px; }

.planes-nota{ text-align:center; color:var(--suave); font-size:14px; margin:18px 0 10px; }

/* ── La escalera de recompensas ─────────────────────────────────────────────
   Cada peldaño es una formación de Academiantes y lo que regala. */
.recompensas{ display:grid; gap:14px; margin-bottom:8px; }
.recompensa{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:20px 22px; box-shadow:var(--sombra);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.recompensa:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); border-color:var(--rosa-medio); }
.recompensa.canjeada{ border-color:var(--rosa); background:#FFF4F7; }
.recompensa-premio{
  flex:0 0 auto; min-width:96px; text-align:center;
  background:var(--rosa-suave); border-radius:14px; padding:12px 14px;
}
.recompensa-premio strong{ display:block; font-family:"Baloo 2",sans-serif; font-size:26px; color:var(--rosa); line-height:1; }
.recompensa-premio span{ font-size:12px; color:var(--suave); font-weight:600; }
.recompensa-texto{ flex:1; min-width:200px; }
.recompensa-texto h3{ margin:0 0 3px; font-size:19px; }
.recompensa-texto p{ margin:0; color:var(--suave); font-size:14.5px; }
.recompensa-precio{ font-weight:700; color:var(--rosa); font-size:15px; }
.recompensa .btn, .recompensa .btn-fantasma{ flex:0 0 auto; text-decoration:none; }
.recompensa-hecha{ font-size:13px; font-weight:700; color:var(--rosa); white-space:nowrap; }

.aviso-premio{
  background:var(--rosa-suave); border-radius:14px; padding:16px 20px;
  text-align:center; font-size:16px; margin-top:18px;
}
.aviso-premio strong{ color:var(--rosa); }

/* Aviso de texto cortado por longitud, con su botón de rehacer al lado. */
.alerta.cortado{
  margin:0 22px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:space-between;
}

/* ── Consentimiento en la puerta ────────────────────────────────────────────
   La casilla es obligatoria y sale SIN marcar: el RGPD pide un acto claro, no
   una casilla premarcada que nadie ve. */
.permiso-rgpd{ margin:4px 0 14px; font-size:15px; color:var(--tinta); }
.permiso-rgpd a{ color:var(--rosa); font-weight:600; }
.permiso-rgpd input{ width:19px; height:19px; flex:0 0 auto; }
.permiso-rgpd.falta{ color:var(--rosa); font-weight:600; }
.permiso-rgpd.falta input{ outline:2px solid var(--rosa); outline-offset:3px; border-radius:4px; }

.datos-info{
  text-align:left; background:#FFF6F9; border:1px solid var(--borde);
  border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:14px;
}
.datos-info summary{ cursor:pointer; font-weight:700; color:var(--suave); }
.datos-info p{ margin:10px 0 0; color:var(--suave); line-height:1.55; }
.datos-info strong{ color:var(--tinta); }
.datos-info a{ color:var(--rosa); }


/* ── Aviso de cookies ───────────────────────────────────────────────────────
   Barra discreta abajo. NO bloquea nada, porque no hay nada que bloquear: es
   un aviso, no una petición de permiso. */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  background:var(--papel); border-top:1px solid var(--borde);
  box-shadow:0 -6px 24px rgba(74,36,51,.10);
  padding:14px clamp(16px, 4vw, 32px);
}
.cookies-texto{
  margin:0; font-size:14.5px; color:var(--suave); max-width:70ch; line-height:1.5;
}
.cookies-texto strong{ color:var(--tinta); }
.cookies-texto a{ color:var(--rosa); font-weight:600; white-space:nowrap; }
.cookies .btn{ flex:0 0 auto; }
@media (max-width:640px){
  .cookies{ gap:12px; }
  .cookies-texto{ font-size:14px; }
}


/* ── Puntitos de "estoy pensando" ───────────────────────────────────────────
   Los segmentos largos tardan casi un minuto. Sin algo que se mueva, parece
   que se ha colgado. */
.puntitos{ display:inline-flex; gap:5px; align-items:center; margin-left:2px; }
.puntitos i{
  width:7px; height:7px; border-radius:50%; background:var(--rosa-medio);
  animation:puntito 1.25s ease-in-out infinite;
}
.puntitos i:nth-child(2){ animation-delay:.18s; }
.puntitos i:nth-child(3){ animation-delay:.36s; }
@keyframes puntito{
  0%, 70%, 100%{ transform:translateY(0); opacity:.35; }
  35%          { transform:translateY(-6px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .puntitos i{ animation:none; opacity:.7; } }

/* ── Lo que he creado ───────────────────────────────────────────────────────── */
.historial-lista{ display:grid; gap:14px; margin-bottom:28px; }
.historial-fila{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--papel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:18px 22px; box-shadow:var(--sombra); text-align:left;
  font-family:inherit; color:inherit; cursor:pointer; width:100%;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.historial-fila:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); border-color:var(--rosa-medio); }
.historial-icono{ font-size:26px; flex:0 0 auto; }
.historial-texto{ flex:1; min-width:200px; }
.historial-texto h3{ margin:0 0 3px; font-size:17px; font-family:"Baloo 2",sans-serif; }
.historial-texto p{ margin:0; color:var(--suave); font-size:14px; }
.historial-estado{ font-size:13px; font-weight:700; color:var(--rosa); white-space:nowrap; }
.historial-estado.medias{ color:var(--oro); }
.historial-vacio{ text-align:center; color:var(--suave); padding:30px; }

/* El consejo que antes iba en la parada obligatoria, ahora sobre su pieza. */
.pieza-nota{
  background:var(--rosa-suave); color:var(--tinta); font-size:14.5px;
  padding:12px 22px; line-height:1.55;
}