/*
 * Piezas propias de la página pública: portada, planes y el registro por pasos.
 * Lo compartido con el panel vive en mediclad.css.
 */

/* ================================================================== portada */

.portada {
  position: relative;
  padding: clamp(56px, 11vw, 112px) 0 var(--e8);
  overflow: hidden;
}

/* Resplandor detrás del titular. Fijo y sin animar: da profundidad sin pedir
   atención, que es justo lo que no debe hacer una página sobre salud. */
.portada::before {
  content: '';
  position: absolute; inset: -40% 0 auto -10%;
  height: 620px;
  background: radial-gradient(50% 50% at 30% 50%, rgba(0, 196, 181, 0.16), transparent 70%);
  pointer-events: none;
}

.portada > * { position: relative; }

/* Dos columnas a partir de tableta: el texto manda y la foto acompaña, por
   eso la columna de la imagen es la menor de las dos. En vertical se apilan y
   la foto queda debajo, donde no estorba a la lectura. */
.portada-rejilla {
  display: grid;
  gap: var(--e6);
  align-items: center;
}
@media (min-width: 900px) {
  .portada-rejilla { grid-template-columns: 1.15fr 0.85fr; gap: var(--e7); }
}

.portada h1 { max-width: 15ch; }
.portada .guia { margin-top: var(--e4); font-size: clamp(17px, 2.2vw, 21px); }

.linea-viva {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 6px 14px 6px 10px;
  margin-bottom: var(--e4);
  border: 1px solid var(--ln2);
  border-radius: 999px;
  font-size: 14px; color: var(--m1);
}
.linea-viva .punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- el trazo de electrocardiograma de la portada ------------------------ */
.trazo { width: 100%; height: 96px; display: block; margin-top: var(--e6); }
.trazo path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Se dibuja una vez al cargar. Es la única animación larga del sitio y
     tiene un motivo: el producto va de una señal que aparece en el tiempo. */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: trazar 2.6s ease-out 0.2s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .trazo path { animation: none; stroke-dashoffset: 0; }
  .linea-viva .punto { animation: none; }
}

/* ================================================================== pasos */

.pasos {
  counter-reset: paso;
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.paso { position: relative; padding-top: var(--e5); border-top: 1px solid var(--ln); }
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute; top: calc(-1 * var(--e3));
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--teal);
  background: var(--pg);
  padding-right: var(--e3);
}
.seccion.alterna .paso::before { background: var(--pg2); }

/* ================================================================== planes */

.planes {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  align-items: start;
}

.plan {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--e5);
  background: var(--sf);
  border: 1px solid var(--ln);
  border-radius: var(--r-l);
  transition: border-color var(--paso), transform var(--paso);
}
.plan:hover { border-color: var(--ln3); }

/* El destacado se distingue por el borde, no por tamaño: agrandarlo movería
   las columnas de sitio y obligaría a comparar precios a distintas alturas. */
.plan.destacado { border-color: var(--teal); background: var(--sf2); }
.plan.destacado::after {
  content: 'Más elegido';
  position: absolute; top: -11px; left: var(--e5);
  padding: 2px 12px;
  background: var(--teal); color: #04202c;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  border-radius: 999px;
}

.plan .precio { display: flex; align-items: baseline; gap: 6px; margin: var(--e3) 0 var(--e2); }
.plan .precio .cifra { font-size: 42px; }
.plan .cupos { display: flex; gap: var(--e4); margin: var(--e4) 0; }
.plan .cupo { display: flex; align-items: center; gap: var(--e2); font-size: 15px; color: var(--m1); }
.plan .cupo i { color: var(--teal); width: 16px; text-align: center; }

.funciones { list-style: none; margin: 0 0 var(--e5); padding: var(--e4) 0 0; border-top: 1px solid var(--ln); }
.funciones li {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: 6px 0;
  font-size: 15px;
}
.funciones i { margin-top: 4px; width: 14px; flex: 0 0 auto; font-size: 13px; }
.funciones .si  { color: var(--tx); }
.funciones .si i  { color: var(--ok); }
/* Lo que el plan NO trae se enseña igual, tachado en gris. Es lo que deja
   comparar dos planes sin abrir otra pestaña. */
.funciones .no  { color: var(--m3); }
.funciones .no i  { color: var(--m3); }
.funciones .luego { color: var(--m3); }
.funciones .luego i { color: var(--warn); }

.plan .boton { margin-top: auto; }

/* ============================================================ registro */

/* Barra de progreso del registro. Cuatro pasos y siempre a la vista: en un
   formulario que pide una tarjeta, saber cuánto falta es la diferencia entre
   terminarlo y abandonarlo. */
.progreso { display: flex; gap: var(--e1); margin-bottom: var(--e6); }
.progreso .tramo { flex: 1; }
.progreso .barra-p {
  height: 4px; border-radius: 2px;
  background: var(--ln); margin-bottom: 8px;
  transition: background var(--paso);
}
.progreso .tramo.hecho .barra-p,
.progreso .tramo.activo .barra-p { background: var(--teal); }
.progreso .et {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--m3);
}
.progreso .tramo.activo .et { color: var(--teal2); }
.progreso .tramo.hecho .et { color: var(--m2); }

/* --- elección de plan dentro del registro -------------------------------- */
.opcion-plan {
  display: flex; align-items: center; gap: var(--e4);
  width: 100%; padding: var(--e4);
  background: var(--sf); border: 1px solid var(--ln);
  border-radius: var(--r); cursor: pointer; text-align: left;
  transition: border-color var(--paso), background var(--paso);
  min-height: 76px;
}
.opcion-plan:hover { border-color: var(--ln3); }
.opcion-plan[aria-pressed="true"] { border-color: var(--teal); background: var(--sf2); }

/* Marca de selección. Se dibuja con borde y no con color de fondo solo, para
   que quien no distingue el turquesa vea igualmente cuál está elegido. */
.opcion-plan .marca-sel {
  flex: 0 0 auto; width: 22px; height: 22px;
  border: 2px solid var(--ln3); border-radius: 50%;
  display: grid; place-items: center;
}
.opcion-plan[aria-pressed="true"] .marca-sel { border-color: var(--teal); }
.opcion-plan[aria-pressed="true"] .marca-sel::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--teal);
}

/* --- acuerdo ------------------------------------------------------------- */
.acuerdo {
  max-height: 320px; overflow-y: auto;
  padding: var(--e4);
  background: var(--ink);
  border: 1px solid var(--ln);
  border-radius: var(--r-s);
}
.acuerdo dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 600; color: var(--tx);
  margin-top: var(--e4);
}
.acuerdo dt:first-child { margin-top: 0; }
.acuerdo dd { margin: 4px 0 0; font-size: 15px; color: var(--m1); }

/* La firma se escribe. Un nombre tecleado a mano compromete de otra forma
   que una casilla, y es lo que queda guardado con fecha y versión. */
.firma {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.04em;
  min-height: 62px !important;
  text-align: center;
}

.casilla {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4);
  background: var(--sf); border: 1px solid var(--ln2);
  border-radius: var(--r-s);
  cursor: pointer;
  margin-bottom: var(--e4);
}
.casilla input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--teal); }
.casilla span { font-size: 15px; color: var(--m1); }

/* --- resumen de cobro ---------------------------------------------------- */
.cobro { padding: var(--e4); background: var(--ink); border-radius: var(--r-s); border: 1px solid var(--ln); }
.cobro .linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; color: var(--m1); }
.cobro .total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--ln);
}
.cobro .total .cifra { font-size: 32px; }

/* --- final --------------------------------------------------------------- */
.sello {
  width: 84px; height: 84px; margin: 0 auto var(--e5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(70, 211, 154, 0.13);
  border: 2px solid var(--ok);
  color: var(--ok); font-size: 36px;
}

/* ==================================================================== pie */

.pie {
  padding: var(--e7) 0 var(--e6);
  border-top: 1px solid var(--ln);
  color: var(--m3); font-size: 14px;
}
.pie a { color: var(--m2); }

@media (max-width: 700px) {
  .progreso .et { display: none; }   /* el color del tramo ya lo dice */
  .plan { padding: var(--e4); }
}