/* ==========================================================================
   CODIMED — hoja de estilo del sitio.

   La maquetación vive en atributos style= dentro del HTML (así venía el
   diseño original). Aquí quedan solo las cosas que un atributo no puede
   expresar: estados :hover / :focus, animaciones y puntos de quiebre.
   ========================================================================== */

*                              { box-sizing: border-box }
body                           { margin: 0; background: #FFFFFF; -webkit-font-smoothing: antialiased }
a                              { color: #A67405; text-decoration: none }
a:hover                        { color: #133631 }
::selection                    { background: #A67405; color: #133631 }
input, button, textarea, select { font: inherit; color: inherit }


/* --------------------------------------------------------------- animaciones */

@keyframes cmLine { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes cmRule { from { transform: scaleX(0) }                    to { transform: scaleX(1) } }
@keyframes cmDots { 0%, 60%, 100% { opacity: .35; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-2px) } }
@keyframes rmFade { from { opacity: 0; transform: translateY(14px) }  to { opacity: 1; transform: translateY(0) } }


/* ------------------------------------------------------------ portada: hover */

.nav-link:hover      { color: #FFFFFF }
.link-gold:hover     { color: #A67405 }
.btn-accent:hover    { background: #A67405; color: #133631 }
.cta-invert:hover    { background: #FFFFFF; color: #133631 }
.plan-cta:hover      { background: #FFFFFF; color: #133631; border-color: #FFFFFF }
.carousel-arrow:hover{ background: #133631; border-color: #133631 }
.field-line:focus    { border-bottom-color: #A67405 }


/* ------------------------------------------------------------ formularios */

.field-box:focus     { border-color: #A67405 }
.opt-row:hover       { background: #EDF0EE }
.btn-dark:hover      { background: #0C2420 }
.btn-gold:hover      { background: #8A6F13; border-color: #8A6F13; color: #FFFFFF }
.chip-add:hover      { border-color: #A67405 }

/* Los <summary> conservan la apariencia de botón: sin triángulo del navegador */
summary::-webkit-details-marker { display: none }
summary::marker                 { content: '' }

/* Mensaje de error bajo un campo */
.error-msg {
  display: block;
  font-size: 11.5px;
  color: #B4232A;
  margin-top: 6px;
}
.field-box.is-error,
.field-line.is-error { border-color: #B4232A }
.field-line.is-error { border-bottom-color: #B4232A }


/* --------------------------------------------------- demo de WhatsApp (chat) */

.wa-row:hover  { background: #F7F7F7 }
.wa-btn:hover  { background: #F1F1F1 }
.wa-scroll     { scrollbar-width: none }
.wa-scroll::-webkit-scrollbar { display: none }


/* ------------------------------------------------------------ puntos de quiebre */

/* Los enlaces de navegación no caben por debajo de 1000 px */
@media (max-width: 999px) {
  [data-navlinks] { display: none !important }
}

/* El teléfono del hero solo aparece cuando hay ancho para ponerlo al lado */
[data-hero-phone] { display: none }
@media (min-width: 1060px) {
  [data-hero-phone] { display: block }
  [data-hero-copy]  { padding-right: clamp(360px, 34vw, 560px) }
  [data-hero-title] { font-size: clamp(32px, 3.3vw, 52px) !important }
}

/* Rejilla de beneficios: 3 / 2 / 1 columnas */
@media (max-width: 1079px) {
  [data-benefits-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
}
@media (max-width: 699px) {
  [data-benefits-grid] { grid-template-columns: minmax(0, 1fr) !important }
}

/* Fichas de hospitales y aseguradoras: dos columnas en móvil */
@media (max-width: 639px) {
  [data-chip-grid] { display: grid !important; grid-template-columns: repeat(2, 1fr) }
  [data-chip-item] { min-width: 0 !important; flex: initial !important }
}


/* ------------------------------------------------------ movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important }
}