/* === estilos.css (unificado) === */

/* 1. Variables y Reseteo Básico */
:root{
  --primary-color:#0cb8b6;
  --secondary-color:#00334e;
  --text-color:#333;
  --light-gray:#f8f9fa;
  --white:#fff;
  --shadow:0 8px 25px rgba(0,0,0,.1);
  --font-heading:'Poppins',sans-serif;
  --font-body:'Open Sans',sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); color:var(--text-color); line-height:1.7; background-color:var(--white); }

/* 2. Utilidades */
.container{ max-width:1140px; margin:0 auto; padding:0 20px; }
.section{ padding:80px 0; }
.section-light{ background-color:var(--light-gray); }
.section-heading{ text-align:center; margin-bottom:60px; opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.section-heading.visible{ opacity:1; transform:translateY(0); }
.section-heading h2{ font-family:var(--font-heading); font-size:2.5rem; color:var(--secondary-color); margin-bottom:10px; }
.section-heading h2 span{ color:var(--primary-color); }
.section-heading p{ max-width:600px; margin:0 auto; color:#666; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 28px; border-radius:8px; text-decoration:none; font-family:var(--font-heading); font-weight:600; transition:all .3s ease; cursor:pointer; border:none; }
.btn-primary{ background-color:var(--primary-color); color:var(--white); }
.btn-primary:hover{ background-color:#0a9a98; transform:translateY(-3px); box-shadow:0 4px 15px rgba(12,184,182,.3); }
.btn-secondary{ background-color:var(--white); color:var(--primary-color); border:2px solid var(--primary-color); }
.btn-secondary:hover{ background-color:var(--primary-color); color:var(--white); }

/* 3. Header/Nav */
.header{ background-color:var(--white); padding:15px 0; position:fixed; width:100%; top:0; left:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:top .3s; }
.nav{ display:flex; justify-content:space-between; align-items:center; }
.nav-logo img{ height:50px; }
.nav-list{ display:flex; list-style:none; align-items:center; }
.nav-item{ margin-left:30px; }
.nav-link{ text-decoration:none; color:var(--secondary-color); font-weight:500; font-family:var(--font-heading); position:relative; padding-bottom:5px; }
.nav-link::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:var(--primary-color); transition:width .3s ease; }
.nav-link:hover::after{ width:100%; }
.nav-toggle{ display:none; font-size:1.5rem; cursor:pointer; }

/* 4. Hero */
.hero{
  background-image:linear-gradient(rgba(0,51,78,.7),rgba(0,51,78,.7)),url(/assets/img/s1-eben.png);
  background-size:cover; background-position:center; color:var(--white);
  padding:180px 0 65px; text-align:center;
}
.hero h1{ font-family:var(--font-heading); font-size:3.5rem; margin-bottom:20px; }
.hero h1 span{ color:var(--primary-color); }
.hero p{ font-size:1.2rem; max-width:700px; margin:0 auto 40px; }
.hero .btn{ font-size:1.1rem; padding:15px 35px; }

/* 5. Modalidades */
.modalities-section{ margin-top:20px; padding-bottom:80px; background-color:var(--white); }
.modalities-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:30px; }
.modality-card{ display:flex; align-items:center; justify-content:space-between; background-color:var(--light-gray); padding:20px 30px; border-radius:10px; transition:transform .3s ease, box-shadow .3s ease; }
.modality-card:hover{ transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,.08); }
.modality-card .icon{ font-size:2.5rem; color:var(--primary-color); margin-right:20px; }
.modality-card h3{ font-family:var(--font-heading); color:var(--secondary-color); font-size:1.3rem; margin-right:auto; }
.modality-card .btn{ padding:8px 20px; font-size:.9rem; white-space:nowrap; }

/* 6. Servicios */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.service-card{ background-color:var(--white); padding:40px 30px; text-align:center; border-radius:10px; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; cursor:pointer; }
.service-card:hover{ transform:translateY(-10px); box-shadow:0 15px 35px rgba(0,0,0,.15); }
.service-card .icon{ font-size:3rem; color:var(--primary-color); margin-bottom:20px; }
.service-card h3{ font-family:var(--font-heading); color:var(--secondary-color); font-size:1.3rem; margin-bottom:15px; }
.service-card p{ color:#666; font-size:.95rem; text-align:justify; }

/* 7. Why Us */
.why-us{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.why-us-img img{ width:100%; border-radius:10px; box-shadow:var(--shadow); }
.why-us-content h2{ font-family:var(--font-heading); font-size:2.5rem; color:var(--secondary-color); margin-bottom:20px; }
.why-us-content .feature-list{ list-style:none; margin-top:30px; }
.why-us-content .feature-item{ display:flex; align-items:flex-start; margin-bottom:25px; }
.feature-item .icon{ font-size:1.5rem; color:var(--primary-color); margin-right:20px; margin-top:5px; }
.feature-item h4{ font-family:var(--font-heading); color:var(--secondary-color); margin-bottom:5px; }

/* 8. Profesionales */
.doctors-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; justify-content:center; }
.doctor-card{ background:var(--white); border-radius:10px; overflow:hidden; text-align:center; box-shadow:var(--shadow); transition:transform .3s ease; }
.doctor-card:hover{ transform:translateY(-10px); }
.doctor-card-img img{ width:100%; height:auto; display:block; }
.doctor-card-info{ padding:25px; }
.doctor-card-info h4{ font-family:var(--font-heading); font-size:1.4rem; color:var(--secondary-color); }
.doctor-card-info h5{ color:var(--primary-color); font-weight:500; margin-bottom:15px; }
.doctor-card-info .btn{ font-size:.9rem; padding:8px 20px; }

/* 9. Testimonios */
.testimonials-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px; }
.testimonial-card{ background-color:var(--white); padding:30px; border-radius:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.testimonial-card .stars{ color:#ffc107; margin-bottom:15px; }
.testimonial-card p{ font-style:italic; color:#555; flex-grow:1; margin-bottom:20px; }
.testimonial-author{ display:flex; align-items:center; margin-top:auto; }
.testimonial-author img{ width:50px; height:50px; border-radius:50%; margin-right:15px; object-fit:cover; }
.testimonial-author h5{ font-family:var(--font-heading); color:var(--secondary-color); margin:0; }

/* 10. Footer */
.footer{ background-color:var(--secondary-color); color:rgba(255,255,255,.8); padding:60px 0 20px; }
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-bottom:50px; }
.footer-col h4{ font-family:var(--font-heading); color:var(--white); margin-bottom:20px; }
.footer-col p,.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:rgba(255,255,255,.8); text-decoration:none; transition:color .3s ease; }
.footer-col a:hover{ color:var(--primary-color); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.2); padding-top:20px; text-align:center; font-size:.9rem; }

/* 11. Modales */
.modal{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:2000; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.modal.active{ opacity:1; visibility:visible; }
.modal-content{ background-color:var(--white); padding:30px 40px; border-radius:10px; max-width:600px; width:90%; position:relative; transform:translateY(-50px); transition:transform .3s ease; }
.modal.active .modal-content{ transform:translateY(0); }
.modal-close{ position:absolute; top:15px; right:15px; font-size:1.8rem; color:#999; cursor:pointer; border:none; background:none; }
.modal-close:hover{ color:var(--text-color); }
.modal-header h4{ font-family:var(--font-heading); color:var(--secondary-color); font-size:1.8rem; margin-bottom:5px; }
.modal-header p{ color:#777; font-style:italic; margin-bottom:20px; }
.modal-body strong{ display:block; margin-bottom:10px; font-family:var(--font-heading); color:var(--secondary-color); }
.modal-body ul{ padding-left:20px; margin-bottom:20px; }
.modal-body li{ margin-bottom:8px; }
.modal-footer{ text-align:right; margin-top:25px; }

/* Botones flotantes */
.contenedor-botones-flotantes{ position:fixed; top:50%; right:14px; transform:translateY(-50%) translateX(120%); z-index:999; display:flex; flex-direction:column; gap:12px; opacity:0; visibility:hidden; transition:opacity .4s ease, transform .4s ease; }
.contenedor-botones-flotantes.visible{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
.contenedor-botones-movil{ display:none; justify-content:center; gap:20px; margin-top:30px; }
.boton-flotante{ display:flex; justify-content:center; align-items:center; width:45px; height:45px; color:#fff; text-decoration:none; border-radius:50%; font-size:20px; box-shadow:2px 2px 8px rgba(0,0,0,.25); transition:all .2s ease-in-out; background-color:var(--primary-color); }
.boton-flotante:hover{ transform:scale(1.1); background-color:#0a9a98; }

/* Media */
@media (max-width:992px){
  .why-us{ grid-template-columns:1fr; }
  .why-us-img{ text-align:center; margin-bottom:30px; }
  .why-us-img img{ max-width:500px; }
}
@media (max-width:768px){
  .section-heading h2,.hero h1,.why-us-content h2{ font-size:2rem; }
  .hero{ padding:140px 0 80px; }
  .nav-list{ position:fixed; top:80px; left:0; width:100%; flex-direction:column; background-color:var(--white); padding:20px 0; box-shadow:0 5px 10px rgba(0,0,0,.1); transform:translateY(-120%); transition:transform .4s ease-in-out; }
  .nav-list.active{ transform:translateY(0); }
  .nav-item{ margin:15px 0; width:100%; text-align:center; }
  .nav-toggle{ display:block; }
  .header{ padding:15px; }
  .doctors-grid{ grid-template-columns:1fr; gap:30px; }
  .contenedor-botones-flotantes{ display:none; }
  .contenedor-botones-movil{ display:flex; }
  .contenedor-botones-movil .boton-flotante{ width:48px; height:48px; font-size:24px; background-color:var(--white); color:var(--primary-color); }
  .contenedor-botones-movil .boton-flotante:hover{ background-color:var(--primary-color); color:#fff; }
  .modal-footer{ text-align:center; }
}
@media (max-width:500px){
  .modalities-grid{ grid-template-columns:1fr; }
  .modality-card{ flex-direction:column; justify-content:center; align-items:center; padding:25px 20px; }
  .modality-card .icon{ margin-right:0; margin-bottom:15px; }
  .modality-card h3{ margin:0 0 15px 0; }
}

/* Iniciales en testimonios */
.testimonial-initial{ width:50px; height:50px; border-radius:50%; background-color:var(--primary-color); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:1.2rem; margin-right:15px; font-family:var(--font-heading); }

/* Accesibilidad: oculto visual */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Grid más flexible (ajuste tablet) */
.modalities-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; list-style:none; padding-left:0; }

/* Tarjetas link */
.link-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--light-gray); padding:22px 26px; border-radius:12px; border:1px solid rgba(0,0,0,.05); text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.link-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10); border-color:rgba(12,184,182,.35); }
.link-card:focus-visible{ outline:3px solid rgba(12,184,182,.35); outline-offset:2px; }
.link-card .left{ display:flex; align-items:center; gap:16px; min-width:0; }
.link-card .icon{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:radial-gradient(100% 100% at 50% 0%,var(--white) 0%,#eaf8f8 100%); color:var(--primary-color); font-size:26px; box-shadow:inset 0 1px 0 #fff, 0 2px 8px rgba(12,184,182,.15); flex:0 0 56px; }
.link-card .copy h3{ font-family:var(--font-heading); font-size:1.15rem; color:var(--secondary-color); margin:0 0 4px 0; }
.link-card .copy p{ margin:0; font-size:.95rem; color:#566; max-width:40ch; }
.link-card .badge{ display:inline-block; margin-top:8px; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:999px; background:#e6fbfb; color:#0a9a98; border:1px solid rgba(12,184,182,.25); }
.link-card .cta{ white-space:nowrap; font-family:var(--font-heading); font-weight:600; padding:10px 16px; border-radius:8px; border:2px solid var(--primary-color); color:var(--primary-color); transition:background .2s ease, color .2s ease, transform .2s ease; }
.link-card:hover .cta{ background:var(--primary-color); color:var(--white); }
.link-card .cta i{ margin-left:8px; }
@media (max-width:600px){
  .link-card{ flex-direction:column; align-items:flex-start; gap:14px; }
  .link-card .cta{ width:100%; text-align:center; }
  .link-card .copy p{ max-width:unset; }
}
@media (prefers-reduced-motion:reduce){
  .link-card{ transition:none; }
  .link-card:hover{ transform:none; }
}

/* Ajuste espacios entre Modalidades y Servicios */
.modalities-section{ padding-bottom:25px; } /* antes 80px */
#services{ padding-top:20; } /* se deja tal cual estaba */

/* ===== Contacto ===== */
.contact-form{ background:var(--white); border-radius:12px; box-shadow:var(--shadow); padding:24px; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 24px; }
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group--full{ grid-column:1 / -1; }
.contact-form label{ font-family:var(--font-heading); color:var(--secondary-color); font-weight:600; font-size:.95rem; }
.contact-form input,.contact-form select,.contact-form textarea{ border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:12px 14px; font:inherit; color:var(--text-color); background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form textarea{ resize:vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(12,184,182,.15); }
.form-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; }
.consent{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:#556; }
.form-helper{ margin-top:10px; font-size:.9rem; color:#556; }
@media (max-width:768px){
  .form-grid{ grid-template-columns:1fr; }
  .form-footer{ flex-direction:column; align-items:stretch; }
  .consent{ order:2; }
  #btnEnviar{ order:1; }
}

/* Feedback inputs */
.input-error{ border-color:#e53935 !important; box-shadow:0 0 0 3px rgba(229,57,53,.12); }
.input-valid{ border-color:var(--primary-color) !important; box-shadow:0 0 0 3px rgba(12,184,182,.15); }
.field-msg{ margin-top:6px; font-size:.85rem; color:#e53935; }
.field-msg.ok{ color:#2e7d32; }

/* Toast (no usado, pero incluido) */
.toast{ position:fixed; top:24px; left:50%; transform:translate(-50%,-10px); z-index:3000; background:var(--secondary-color); color:#fff; padding:12px 16px; border-radius:10px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:min(92vw,520px); text-align:center; font-weight:600; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast.success{ background:var(--primary-color); }
.toast.error{ background:#e53935; }

/* Aviso centrado (modal liviano) */
.center-notice[hidden]{ display:none !important; }
.center-notice{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:3000; opacity:0; transition:opacity .25s ease; }
.center-notice.show{ opacity:1; }
.center-notice__box{ background:#fff; color:var(--secondary-color); border-radius:14px; padding:22px 24px; max-width:min(92vw,520px); text-align:center; box-shadow:var(--shadow); transform:scale(.96); transition:transform .25s ease; border-top:4px solid var(--primary-color); font-weight:600; }
.center-notice.show .center-notice__box{ transform:scale(1); }
.center-notice.error .center-notice__box{ border-top-color:#e53935; }
.center-notice .fa-check-circle{ color:var(--primary-color); font-size:36px; margin-bottom:8px; }
.center-notice.error .fa-check-circle{ color:#e53935; }
@media (prefers-reduced-motion:reduce){
  .center-notice, .center-notice__box{ transition:none; }
}

/* FAQ */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ background:var(--white); border-radius:8px; box-shadow:var(--shadow); margin-bottom:15px; overflow:hidden; }
.faq-question{ width:100%; background:none; border:none; outline:none; padding:15px 20px; text-align:left; font-size:1rem; font-family:var(--font-heading); font-weight:600; color:var(--secondary-color); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.faq-question i{ transition:transform .3s ease; }
.faq-item.active .faq-question i{ transform:rotate(180deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 20px; }
.faq-item.active .faq-answer{ max-height:300px; padding:15px 20px 20px; }
.faq-answer p{ margin:0; color:#555; }