/* ============================================================
   HISTORIA CLINICA DIGITAL — publico.css
   La pagina que ve un consultorio antes de contratar.

   Hereda los tokens de main.css. Aqui solo esta lo que la
   aplicacion no necesita: la portada, la rejilla de planes y
   el formulario de contacto.

   Criterio: un medico decide en treinta segundos si esto le
   sirve. Nada de animaciones ni de adjetivos; que se vea el
   producto y lo que cuesta.

   Y que se vea SOLIDO. Quien mira esta pagina va a confiarle las
   historias clinicas de sus pacientes a quien la hizo: el azul
   medico, el serif de los titulos y la profundidad de las
   superficies estan ahi para decir «empresa asentada», no
   «aplicacion nueva».

   LOS BRILLOS

   Se mueven, pero despacio y solo aqui. Tres, y ni uno mas:

     el aura de la portada    dos manchas de luz que respiran
     el barrido de los botones una luz que cruza el boton al pasar
     el filo de las tarjetas  una linea que se enciende al pasar

   Todos son lentos —de ocho segundos para arriba— y ninguno
   parpadea. Un brillo rapido en una pagina que vende software
   medico se lee como una oferta de casino; uno lento se lee como
   una superficie bien acabada, que es lo que se quiere.

   Y todos se apagan con prefers-reduced-motion, que main.css
   declara para toda la aplicacion.
   ============================================================ */

.publico {
  background: var(--surface);
  color: var(--text);
}

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

/* ── BARRA SUPERIOR ────────────────────────────── */
.pub-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 249, 246, .93);
  backdrop-filter: blur(10px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.pub-nav .contenedor {
  display: flex; align-items: center; gap: 18px;
  height: 62px;
}
.pub-marca { display: flex; align-items: center; gap: 10px; color: var(--text); }
.pub-marca img { height: 34px; width: auto; }
.pub-marca b {
  font-family: var(--serif);
  font-size: 16px; font-weight: 600; letter-spacing: -.012em;
}
.pub-marca span { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }

.pub-nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pub-nav-links a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
}
.pub-nav-links a:hover { background: var(--surface-3); color: var(--text); }
.pub-nav-links a.destacado {
  background: var(--accent); color: #fff; font-weight: 600;
}
.pub-nav-links a.destacado:hover { background: var(--accent-dark); color: #fff; }

@media (max-width: 720px) {
  .pub-nav-links a.oculta-movil { display: none; }
}

/* ── PORTADA ───────────────────────────────────── */
/* La portada, sobre azul noche. Es lo primero y lo unico que muchos van
   a mirar: si en esos tres segundos no parece una empresa a la que se le
   confia una historia clinica, no hay segunda pantalla. */
.pub-hero {
  position: relative; overflow: hidden;
  padding: 92px 0 84px;
  background: linear-gradient(165deg, #0e3a6e 0%, var(--azul-900) 52%,
                              var(--azul-950) 100%);
  color: #fff;
  border-bottom: 1px solid var(--azul-950);
}
/* El aura: dos manchas de luz que respiran, muy despacio y en fases
   distintas para que no lata como un corazon. Van detras de todo y no
   capturan el raton. */
.pub-hero::before,
.pub-hero::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(70px); opacity: .45;
}
.pub-hero::before {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -18%; right: -6%;
  background: radial-gradient(circle, var(--azul-500) 0%, transparent 70%);
  animation: respirar 14s ease-in-out infinite;
}
.pub-hero::after {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  bottom: -22%; left: -8%;
  background: radial-gradient(circle, var(--cian) 0%, transparent 70%);
  opacity: .22;
  animation: respirar 18s ease-in-out infinite reverse;
}
@keyframes respirar {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-4%, 5%, 0) scale(1.12); }
}
.pub-hero .contenedor { position: relative; z-index: 1; }
.pub-hero .contenedor {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
.pub-hero h1 {
  font-family: var(--serif);
  font-size: 43px; line-height: 1.14; letter-spacing: -.02em;
  font-weight: 600; color: #fff;
  margin-bottom: 20px;
}
/* La frase destacada, en degradado con un barrido lento. Es el unico
   texto de la pagina que se mueve, y por eso funciona: si se moviera
   mas de uno, no destacaria ninguno. */
.pub-hero h1 em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(100deg,
              var(--azul-300) 0%, var(--cian-claro) 30%,
              #ffffff 45%, var(--cian-claro) 60%, var(--azul-300) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: barrer-texto 9s ease-in-out infinite;
}
@keyframes barrer-texto {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}
.pub-hero p.entrada {
  font-size: 16.5px; line-height: 1.65; color: var(--rail-texto);
  margin-bottom: 28px; max-width: 46ch;
}
.pub-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

.pub-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r);
  font-size: 14.5px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--paso), box-shadow var(--paso),
              background var(--paso), color var(--paso);
}
.pub-btn:hover { transform: translateY(-1px); }
.pub-btn:active { transform: translateY(0); }
/* La luz que cruza el boton al pasar por encima. Va una sola vez por
   pasada, no en bucle: un boton que brilla solo, sin que nadie lo
   toque, pide atencion que no ha ganado. */
.pub-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%,
              rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.3, 0, .2, 1);
  pointer-events: none;
}
.pub-btn:hover::after { transform: translateX(120%); }
.pub-btn-principal {
  background: linear-gradient(180deg, var(--azul-550), var(--azul-700));
  color: #fff;
  box-shadow: var(--relieve), 0 6px 18px -4px rgba(13,99,200,.45);
}
.pub-btn-principal:hover {
  background: linear-gradient(180deg, var(--azul-500), var(--azul-600));
  color: #fff;
  box-shadow: var(--relieve), 0 10px 26px -6px rgba(13,99,200,.55);
}
.pub-btn-borde {
  background: var(--surface); color: var(--text); border-color: var(--line-2);
}
.pub-btn-borde:hover { background: var(--surface-3); color: var(--text); }
/* La misma variante, pero sobre el azul de la portada */
.pub-hero .pub-btn-principal {
  background: linear-gradient(180deg, #ffffff, #e3edfb);
  color: var(--azul-800);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px -6px rgba(0,0,0,.45);
}
.pub-hero .pub-btn-principal:hover {
  background: linear-gradient(180deg, #ffffff, #ffffff);
  color: var(--azul-900);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -6px rgba(34,211,238,.35);
}
/* Cristal: se ve el aura de detras a traves del boton */
.pub-hero .pub-btn-borde {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; border-color: rgba(255,255,255,.28);
}
.pub-hero .pub-btn-borde:hover {
  background: rgba(255,255,255,.16); color: #fff;
  border-color: rgba(255,255,255,.45);
}
.pub-btn-wa { background: #1faa53; color: #fff; }
.pub-btn-wa:hover { background: #17853f; color: #fff; }

.pub-hero-nota {
  font-size: 13px; color: var(--rail-tenue);
  display: flex; align-items: center; gap: 7px;
}
.pub-hero-nota i { color: var(--cielo); }

/* La captura de la portada: una hoja de papel con el formulario */
/* La hoja de la portada, ligeramente girada en el espacio. Es lo que
   la convierte en un objeto sobre una mesa en vez de una captura
   pegada, y se endereza al pasar por encima. */
.pub-lamina {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow: 0 32px 70px -12px rgba(4,18,38,.6),
              0 0 0 1px rgba(255,255,255,.08);
  padding: 20px;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) translateZ(0);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1),
              box-shadow .5s ease;
}
.pub-lamina:hover {
  transform: perspective(1400px) rotateY(-2deg) rotateX(0) translateY(-4px);
  box-shadow: 0 40px 90px -14px rgba(4,18,38,.66),
              0 0 0 1px rgba(34,211,238,.18);
}
.pub-lamina-barra {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pub-lamina-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pub-lamina-barra span {
  margin-left: 8px; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.pub-lamina-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--surface-3);
  font-size: 12.5px;
}
.pub-lamina-fila:last-child { border-bottom: none; }
.pub-lamina-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-dark);
  padding: 2px 7px; border-radius: 4px;
}
.pub-lamina-fila b { font-weight: 500; color: var(--text); }
.pub-lamina-fila small { margin-left: auto; color: var(--text-3); font-size: 11.5px; }

@media (max-width: 900px) {
  .pub-hero { padding: 48px 0 44px; }
  .pub-hero .contenedor { grid-template-columns: 1fr; gap: 34px; }
  .pub-hero h1 { font-size: 31px; }
}

/* ── SECCIONES ─────────────────────────────────── */
.pub-seccion { padding: 68px 0; border-bottom: 1px solid var(--line); }
.pub-seccion.gris {
  background: linear-gradient(180deg, var(--surface), var(--bg) 22%,
                              var(--bg) 78%, var(--surface));
}

.pub-titulo { max-width: 62ch; margin-bottom: 38px; }
.pub-titulo .etiqueta {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul-600);
}
.pub-titulo .etiqueta::before {
  content: ''; width: 24px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--azul-600), var(--cian));
}
.pub-titulo h2 {
  font-family: var(--serif);
  font-size: 30px; font-weight: 600; letter-spacing: -.018em;
  margin-bottom: 12px;
}
.pub-titulo p { font-size: 15.5px; color: var(--text-2); line-height: 1.6; }

/* ── REJILLA DE FUNCIONES ──────────────────────── */
.pub-rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pub-tarjeta {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--sombra-2);
  transition: transform var(--paso), box-shadow var(--paso),
              border-color var(--paso);
}
/* El filo de luz de arriba se enciende al pasar por encima. Es una
   linea de un pixel y hace mas por la sensacion de acabado que
   cualquier sombra: parece que la tarjeta capta la luz de la sala. */
.pub-tarjeta::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul-400), transparent);
  opacity: 0; transition: opacity var(--paso);
}
.pub-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-3);
  border-color: var(--azul-200);
}
.pub-tarjeta:hover::before { opacity: 1; }
.pub-tarjeta .icono { transition: transform var(--paso); }
.pub-tarjeta:hover .icono { transform: scale(1.06); }
.pub-tarjeta .icono {
  width: 42px; height: 42px; border-radius: var(--r);
  display: grid; place-items: center; margin-bottom: 15px;
  background: linear-gradient(160deg, var(--azul-100), var(--azul-50));
  color: var(--azul-600); font-size: 16px;
  border: 1px solid var(--azul-200);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(13,99,200,.25);
}
.pub-tarjeta h3 { font-size: 15.5px; margin-bottom: 7px; }
.pub-tarjeta p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

@media (max-width: 900px) { .pub-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pub-rejilla { grid-template-columns: 1fr; } }

/* ── LOS FORMULARIOS DEL MSP ───────────────────── */
.pub-formularios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 10px;
}
.pub-formulario {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 15px;
  box-shadow: var(--sombra-1);
  transition: transform var(--paso), box-shadow var(--paso),
              border-color var(--paso);
}
.pub-formulario:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-2);
  border-color: var(--azul-200);
}
.pub-formulario:hover .cod {
  background: var(--azul-600); color: #fff;
}
.pub-formulario .cod { transition: background var(--paso), color var(--paso); }
.pub-formulario .cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
  padding: 3px 7px; border-radius: 4px;
}
.pub-formulario span { font-size: 13px; color: var(--text); }

/* ── PLANES ────────────────────────────────────── */
.pub-planes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: stretch;
}
.pub-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  box-shadow: var(--sombra-2);
  transition: transform var(--paso), box-shadow var(--paso),
              border-color var(--paso);
}
.pub-plan:hover {
  transform: translateY(-4px); box-shadow: var(--sombra-3);
  border-color: var(--azul-200);
}
/* El plan recomendado va literalmente levantado sobre los demas, con un
   halo azul. Lo que se quiere que se elija, se ve antes. */
.pub-plan.recomendado {
  border-color: var(--azul-400);
  background: linear-gradient(180deg, var(--azul-50), var(--surface) 40%);
  box-shadow: 0 0 0 1px var(--azul-300), var(--sombra-4);
  transform: translateY(-8px);
  z-index: 1;
}
.pub-plan.recomendado:hover {
  transform: translateY(-12px);
  box-shadow: 0 0 0 1px var(--azul-400), var(--sombra-4),
              0 0 40px -8px rgba(26,127,232,.35);
}
@media (max-width: 1000px) {
  .pub-plan.recomendado { transform: none; }
  .pub-plan.recomendado:hover { transform: translateY(-4px); }
}
.pub-plan-cinta {
  position: absolute; top: -12px; left: 22px;
  background: linear-gradient(180deg, var(--azul-500), var(--azul-700));
  color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
  box-shadow: var(--relieve), 0 4px 12px -2px rgba(13,99,200,.5);
}
.pub-plan h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  margin-bottom: 5px;
}
.pub-plan .para { font-size: 12.5px; color: var(--text-3); min-height: 34px; margin-bottom: 14px; }
.pub-plan .precio {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px;
}
.pub-plan .precio b {
  font-family: var(--serif);
  font-size: 40px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--azul-600), var(--azul-900));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--azul-800);
}
.pub-plan .precio span { font-size: 13px; color: var(--text-2); }
.pub-plan .medicos {
  font-size: 13px; color: var(--text-2);
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.pub-plan ul { list-style: none; margin-bottom: 20px; }
.pub-plan li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--text-2); padding: 5px 0;
}
.pub-plan li i { color: var(--medico); font-size: 12px; margin-top: 4px; }
.pub-plan .pub-btn { margin-top: auto; width: 100%; justify-content: center; }

@media (max-width: 1000px) { .pub-planes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pub-planes { grid-template-columns: 1fr; } }

.pub-planes-nota {
  margin-top: 22px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); font-size: 13.5px; color: var(--text-2);
  display: flex; gap: 10px; align-items: flex-start;
}
.pub-planes-nota i { color: var(--accent); margin-top: 3px; }

/* ── CONFIANZA ─────────────────────────────────── */
.pub-confianza {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.pub-confianza h3 {
  font-size: 14.5px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.pub-confianza h3 i { color: var(--azul-500); }
.pub-confianza p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

@media (max-width: 900px) { .pub-confianza { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pub-confianza { grid-template-columns: 1fr; } }

/* ── PREGUNTAS FRECUENTES ──────────────────────── */
.pub-faq { max-width: 760px; }
.pub-faq details {
  border-bottom: 1px solid var(--line);
}
.pub-faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 0; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.pub-faq summary:hover { color: var(--accent); }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-left: auto; font-size: 11px; color: var(--text-3);
  transition: transform .18s ease;
}
.pub-faq details[open] summary::after { transform: rotate(180deg); }
.pub-faq .respuesta {
  padding: 0 0 18px 0; font-size: 14px; color: var(--text-2); line-height: 1.65;
  max-width: 68ch;
}

/* ── CONTACTO ──────────────────────────────────── */
.pub-contacto { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; }
.pub-contacto-lado h2 {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  letter-spacing: -.018em; margin-bottom: 14px;
}
.pub-contacto-lado p { font-size: 15px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; }
.pub-contacto-lista { list-style: none; }
.pub-contacto-lista li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; font-size: 14px; color: var(--text-2);
}
.pub-contacto-lista i { color: var(--medico); margin-top: 4px; width: 16px; text-align: center; }

.pub-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 30px;
  box-shadow: var(--sombra-3);
}
.pub-form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pub-form .campo { margin-bottom: 14px; }
.pub-form label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); margin-bottom: 5px;
}
.pub-form input, .pub-form select, .pub-form textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface);
}
.pub-form textarea { height: auto; padding: 10px 12px; resize: vertical; }
.pub-form input:focus, .pub-form select:focus, .pub-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus);
}
.pub-form .pub-btn { width: 100%; justify-content: center; margin-top: 4px; }
.pub-form .letra-chica {
  margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.55;
}

@media (max-width: 860px) {
  .pub-contacto { grid-template-columns: 1fr; gap: 30px; }
  .pub-form .fila { grid-template-columns: 1fr; }
}

/* ── EL MOVIL DE VERDAD ────────────────────────────
   Mas de la mitad de quien abre esta pagina la abre en el telefono, y
   probablemente desde un enlace de WhatsApp. Si ahi no se entiende en
   diez segundos, no hay segunda oportunidad. */
@media (max-width: 620px) {
  .publico .contenedor { padding: 0 18px; }

  .pub-nav .contenedor { height: 58px; gap: 12px; }
  .pub-marca img { height: 30px; }
  .pub-marca b { font-size: 15px; }
  .pub-marca span span { display: none; }   /* el subtitulo, fuera */

  .pub-hero { padding: 52px 0 48px; }
  .pub-hero h1 { font-size: 30px; line-height: 1.16; }
  .pub-hero p.entrada { font-size: 15.5px; }
  /* En un movil el aura se queda, pero mas discreta: a pantalla
     completa y con el desenfoque grande, come bateria y tapa el texto. */
  .pub-hero::before { filter: blur(50px); opacity: .34; }
  .pub-hero::after  { filter: blur(50px); opacity: .16; }
  /* La lamina, de frente: en 360 px de ancho, girarla la deja ilegible */
  .pub-lamina { transform: none; padding: 16px; }
  .pub-lamina:hover { transform: none; }
  .pub-lamina-fila { font-size: 12px; padding: 8px 0; }

  /* Un boton por fila, a lo ancho */
  .pub-acciones { flex-direction: column; align-items: stretch; }
  .pub-btn { width: 100%; justify-content: center; height: 48px; }

  .pub-seccion { padding: 48px 0; }
  .pub-titulo { margin-bottom: 28px; }
  .pub-titulo h2 { font-size: 24px; }
  .pub-titulo p { font-size: 14.5px; }

  .pub-tarjeta { padding: 20px; }
  .pub-formularios { grid-template-columns: 1fr; }

  .pub-plan { padding: 22px 20px; }
  .pub-plan .precio b { font-size: 34px; }
  .pub-plan .para { min-height: 0; }

  .pub-faq summary { font-size: 14.5px; padding: 15px 0; }
  .pub-faq .respuesta { font-size: 13.5px; }

  .pub-form { padding: 22px 18px; border-radius: var(--r-lg); }
  .pub-form input, .pub-form select, .pub-form textarea {
    height: 46px; font-size: 16px;   /* 16 px: si no, iPhone hace zoom */
  }
  .pub-form textarea { height: auto; }

  .pub-contacto-lado h2 { font-size: 23px; }
  .pub-pie { padding: 34px 0 40px; }
  .pub-pie .contenedor { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pub-pie .creditos { margin-right: 0; }
}

/* Telefonos estrechos de verdad */
@media (max-width: 380px) {
  .publico .contenedor { padding: 0 15px; }
  .pub-hero h1 { font-size: 27px; }
  .pub-titulo h2 { font-size: 22px; }
  .pub-nav-links { gap: 2px; }
  .pub-nav-links a { padding: 8px 9px; font-size: 13px; }
}

/* ── PIE ───────────────────────────────────────── */
.pub-pie {
  padding: 46px 0 54px;
  background: linear-gradient(180deg, var(--azul-900), var(--azul-950));
  font-size: 13px; color: var(--rail-texto);
  border-top: 1px solid var(--azul-800);
  box-shadow: inset 0 1px 0 rgba(122,183,255,.18);
}
.pub-pie .contenedor {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.pub-pie .creditos { margin-right: auto; color: var(--rail-tenue); }
.pub-pie .creditos b { color: #fff; font-family: var(--serif); font-size: 14px; }
.pub-pie a { color: var(--rail-texto); }
.pub-pie a:hover { color: #fff; }

/* ── AVISOS ────────────────────────────────────── */
.pub-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r);
  font-size: 13.5px; margin-bottom: 18px;
}
.pub-aviso i { margin-top: 3px; }
.pub-aviso.ok { background: var(--ok-soft); color: #0b6e4c; }
.pub-aviso.mal { background: var(--danger-soft); color: #a5342d; }

/* ── LA LEY DE PROTECCION DE DATOS ─────────────────
   Dos columnas, y a proposito. La de la izquierda es lo que pone el
   sistema; la de la derecha, lo que sigue poniendo el centro. Ponerlas
   una al lado de otra, del mismo tamano, es la forma de decir sin
   adjetivos que la segunda importa tanto como la primera: el medico que
   lea solo la izquierda saldra creyendo que ya cumple, y no cumple. */
.pub-ley { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pub-ley-lado {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  box-shadow: var(--shadow);
}
.pub-ley-lado.suyo {
  background: var(--surface-2); border-color: var(--line-2);
}
.pub-ley-lado h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.pub-ley-lado h3 i { color: var(--accent); font-size: 15px; }
.pub-ley-lado.suyo h3 i { color: var(--medico); }

.pub-ley-lado .aviso-honesto {
  font-size: 13.5px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 14px; font-style: italic;
}

.pub-ley-lado ul { list-style: none; }
.pub-ley-lado li {
  font-size: 13.5px; color: var(--text-2); line-height: 1.6;
  padding: 10px 0; border-bottom: 1px solid var(--surface-3);
}
.pub-ley-lado li:last-child { border-bottom: none; }
.pub-ley-lado li b { color: var(--text); font-weight: 600; }
/* El articulo, en pequeno y en laton: esta ahi para el abogado que lo
   compruebe, no para el medico que lee de corrido. */
.pub-ley-lado li span {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--azul-600); white-space: nowrap;
}

@media (max-width: 860px) { .pub-ley { grid-template-columns: 1fr; } }