/* =========================================================
   CIRBA — Landing
   Paleta y medidas tomadas del diseño de Figma.
   ========================================================= */

:root{
  --azul-profundo:  #0a2777;  /* títulos principales */
  --azul-electrico: #085cf0;  /* botones, subtítulos */
  --azul-noche:     #060b35;  /* footer */
  --celeste:        #7fc5ef;  /* degradé contacto */
  --celeste-claro:  #e4f7fd;  /* título sobre fondo oscuro */
  --gris-fondo:     #f5f6f8;  /* fondo general */
  --gris-seccion:   #eaeaf1;  /* fondo de secciones alternas */
  --gris-texto:     #555770;  /* párrafos */
  --gris-oscuro:    #183b56;  /* títulos de tarjetas */
  --gris-label:     #5a7184;  /* etiquetas de formulario */
  --gris-placeholder:#959ead;
  --gris-borde:     #c3cad9;
  --gris-linea:     #dadbdd;

  --ancho:      1400px;
  --ancho-md:   1130px;
  --radio:      8px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:70px; }

body{
  margin:0;
  background:var(--gris-fondo);
  color:var(--gris-texto);
  font-family:'Open Sans', system-ui, -apple-system, Arial, sans-serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:32px; }
.wrap--md{ max-width:var(--ancho-md); }
.centro{ text-align:center; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#fff; color:var(--azul-profundo); padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--azul-electrico); outline-offset:3px; }

/* ---------- Títulos ---------- */
.titulo-xl{
  font-size:clamp(34px, 4.2vw, 60px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.5px;
  color:var(--azul-profundo);
  margin:0;
}
.titulo-lg{
  font-size:clamp(30px, 3.6vw, 55px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:0.2px;
  color:var(--azul-profundo);
  margin:0 0 48px;
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.is-fijo{
  background:rgba(6,11,53,.68);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 20px rgba(0,0,0,.18);
}
.nav__inner{
  max-width:var(--ancho); margin-inline:auto;
  padding:10px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo img{ width:125px; height:auto; }

.nav__menu{ display:flex; align-items:center; gap:30px; }
.nav__menu a{
  font-family:'Poppins', sans-serif; font-weight:500; font-size:14px;
  color:rgba(255,255,255,.88); text-decoration:none;
  transition:color .2s ease;
}
.nav__menu a:hover{ color:#fff; }

.nav__cta{
  border:1.5px solid #fff; border-radius:4px;
  padding:12px 28px;
  font-family:'Open Sans', sans-serif !important;
  font-weight:800 !important; font-size:14px;
  letter-spacing:-0.14px; color:#fff9f8 !important;
  transition:background .2s ease, color .2s ease;
}
.nav__cta:hover{ background:#fff; color:var(--azul-profundo) !important; }

.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav__burger span{ width:26px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--azul-noche) url('../assets/fondo-home.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  padding:120px 32px;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,11,53,.35) 0%, rgba(6,11,53,.15) 45%, rgba(6,11,53,.45) 100%);
}
.hero__logo{
  position:relative; z-index:2; width:min(793px, 80vw);
  opacity:0; transform:translateY(12px) scale(.988);
  animation:entradaHero 1.1s cubic-bezier(.22,.61,.36,1) .12s forwards;
}
@keyframes entradaHero{ to{ opacity:1; transform:none; } }

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:56px; transform:translateX(-50%);
  width:29px; height:82px; border:1px solid rgba(255,255,255,.85); border-radius:2000px;
  display:flex; align-items:center; justify-content:center;
}
.hero__scroll svg{ width:8px; height:53px; animation:flota 2.4s ease-in-out infinite; }
@keyframes flota{ 0%,100%{ transform:translateY(-3px);} 50%{ transform:translateY(3px);} }

/* =========================================================
   ¿QUIÉNES SOMOS?
   ========================================================= */
.quienes{ padding:96px 0 104px; }
.quienes__claim{
  font-size:clamp(22px, 2vw, 28px); font-weight:700; line-height:1.3;
  color:var(--azul-profundo); text-align:center;
  margin:40px auto 32px; max-width:1050px;
}
.quienes__texto{
  max-width:930px; margin:0 auto 20px;
  text-align:center; color:var(--azul-profundo); line-height:1.45;
}

/* =========================================================
   ESPECIALIDADES Y EQUIPO MÉDICO
   ========================================================= */
.equipo{ background:var(--gris-seccion); padding:88px 0 96px; }

.equipo__head{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  margin-bottom:56px;
}
.equipo__bajada{
  font-size:clamp(24px, 2.6vw, 40px); font-weight:400; line-height:1.25;
  color:var(--azul-profundo); margin:8px 0 0;
}
.equipo__intro{ margin:12px 0 0; line-height:1.45; }

/* Pestañas */
.tabs{ display:flex; flex-wrap:wrap; gap:34px; margin-bottom:36px; }
.tabs__btn{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:inherit; font-size:18px; color:var(--gris-texto);
  border-bottom:2px solid transparent; transition:.2s;
}
.tabs__btn:hover{ color:var(--azul-electrico); }
.tabs__btn.is-active{ color:var(--azul-profundo); font-weight:700; border-bottom-color:var(--azul-electrico); }

/* Carrusel: se desplaza con el dedo, con el trackpad o con las flechas */
.medicos{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.medicos::-webkit-scrollbar{ display:none; }

.medicos__pista{
  display:flex; gap:25px; margin:0; padding:0 0 8px; list-style:none;
}
.medicos__pista[hidden]{ display:none; }
.medico{ flex:0 0 280px; scroll-snap-align:start; }
.medico__foto{
  position:relative; display:block;
  width:280px; height:280px; border-radius:20px; overflow:hidden;
  background:#d7dbe4;
}
.medico__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1); }

/* Ficha con perfil de LinkedIn */
.medico__foto--link{ cursor:pointer; }
.medico__foto--link:hover img{ transform:scale(1.04); }

.medico__linkedin{
  position:absolute; right:12px; bottom:12px;
  width:34px; height:34px; border-radius:50%;
  background:#fff; color:var(--azul-electrico);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(6,11,53,.22);
  transition:background .25s ease, color .25s ease;
}
.medico__linkedin svg{ width:17px; height:17px; }
.medico__foto--link:hover .medico__linkedin{ background:var(--azul-electrico); color:#fff; }
.medico__nombre{
  margin:14px 0 0; font-size:15px; font-weight:600;
  letter-spacing:.231px; color:var(--azul-electrico);
}

.medicos__nav{ display:flex; gap:12px; margin-top:28px; }
.flecha{
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--azul-electrico); background:transparent;
  color:var(--azul-electrico); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.flecha svg{ width:20px; height:20px; }
.flecha:hover{ background:var(--azul-electrico); color:#fff; }
.flecha:disabled{ opacity:.3; cursor:default; }
.flecha:disabled:hover{ background:transparent; color:var(--azul-electrico); }

/* =========================================================
   CIRUGÍA ROBÓTICA
   ========================================================= */
.robotica{
  position:relative;
  background:var(--azul-noche) url('../assets/bg-cirugia-robotica.jpg') center/cover no-repeat;
  padding:80px 0;
  color:#fff;
  overflow:hidden;
}
/* Velo que oscurece el fondo para que el título se lea siempre */
.robotica::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,11,53,.18) 0%, rgba(6,11,53,0) 40%);
  pointer-events:none;
}
.robotica .wrap{ max-width:1600px; }
.robotica__grid{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:center;
  position:relative; z-index:2;
}
.robotica__img img{ width:100%; max-width:960px; height:auto; margin-inline:auto; }
.robotica__titulo{
  font-size:clamp(38px, 4.8vw, 70px); font-weight:800; line-height:1.05;
  letter-spacing:-0.7px; color:var(--celeste-claro);
  margin:0 0 28px;
}
.robotica__texto p{ margin:0 0 20px; line-height:1.45; color:rgba(255,255,255,.95); }
.robotica__texto strong{ font-weight:600; color:#fff; }

/* =========================================================
   VENTAJAS
   ========================================================= */
.ventajas{ padding:96px 0 104px; }
.ventajas .titulo-lg{ max-width:760px; margin-inline:auto; }

.ventajas__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:50px;
}
.ventaja{
  background:#fff; border-radius:10px;
  padding:34px 40px 40px;
  min-height:300px;
}
.ventaja__icono{ width:100px; height:100px; object-fit:contain; margin-bottom:22px; }
.ventaja__titulo{
  font-size:20px; font-weight:600; line-height:1.4;
  color:var(--azul-electrico); margin:0 0 10px;
}
.ventaja p{ font-size:14px; line-height:1.3; margin:0; color:var(--gris-texto); }

/* =========================================================
   ¿EN QUÉ CIRUGÍAS PUEDE UTILIZARSE?
   ========================================================= */
.cirugias{ background:var(--gris-seccion); padding:100px 0 110px; }
.cirugias__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

.cirugias__fotos{ position:relative; padding-bottom:120px; }
.cirugias__foto{ border-radius:var(--radio); overflow:hidden; }
.cirugias__foto--a{ width:85%; margin-left:auto; }
.cirugias__foto--a img{ width:100%; height:600px; object-fit:cover; }
.cirugias__foto--b{
  position:absolute; left:0; bottom:0;
  width:62%;
  box-shadow:0 22px 50px rgba(6,11,53,.34);
}
.cirugias__foto--b img{ width:100%; height:390px; object-fit:cover; }

.cirugias__lista .titulo-lg{ margin-bottom:40px; }

.cirugia{ display:flex; gap:22px; align-items:flex-start; margin-bottom:34px; }
.cirugia__icono{
  flex:0 0 84px; width:84px; height:84px;
  display:flex; align-items:center; justify-content:center;
}
.cirugia__icono img{ width:100%; height:100%; object-fit:contain; }
.cirugia h3{
  font-size:24px; font-weight:700; letter-spacing:.2px; line-height:1.3;
  color:var(--gris-oscuro); margin:4px 0 6px;
}
.cirugia p{ font-size:16px; line-height:1.55; margin:0; }

/* =========================================================
   PREGUNTAS FRECUENTES
   ========================================================= */
.faq{ padding:96px 0 104px; }

.faq__item{ border-bottom:1px solid var(--gris-linea); }
.faq__pregunta{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:22px 0;
  font-family:inherit; font-size:18px; font-weight:800; line-height:1.55;
  color:var(--azul-profundo); text-align:left;
}
.faq__chevron{
  flex:0 0 13px; width:13px; height:8px; position:relative; transition:transform .3s ease;
}
.faq__chevron::before{
  content:''; position:absolute; inset:0;
  border-left:6.5px solid transparent; border-right:6.5px solid transparent;
  border-top:8px solid var(--azul-profundo);
}
.faq__item.is-open .faq__chevron{ transform:rotate(180deg); }

.faq__respuesta{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.faq__item.is-open .faq__respuesta{ grid-template-rows:1fr; }
.faq__respuesta > p{
  overflow:hidden;
  margin:0; padding:0 60px 0 0;
  font-size:18px; line-height:1.55; color:var(--gris-texto);
}
.faq__item.is-open .faq__respuesta > p{ padding-bottom:26px; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{ padding:40px 0 0; position:relative; z-index:2; }

.contacto__caja{
  position:relative; overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg, var(--celeste) 0%, var(--azul-profundo) 100%);
  padding:70px 64px 40px;
}

.contacto__marcas{ position:absolute; inset:0; pointer-events:none; }
.contacto__marcas img{
  position:absolute; width:499px; opacity:.5;
  mix-blend-mode:color-burn;
}
.contacto__marcas img:nth-child(1){ left:-85px;  top:-66px; }
.contacto__marcas img:nth-child(2){ left:495px;  top:260px; }
.contacto__marcas img:nth-child(3){ right:-100px; top:-157px; }

.contacto__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:stretch;
}

.contacto__texto{ display:flex; flex-direction:column; }

.contacto__titulo{
  font-size:clamp(36px, 4.2vw, 60px); font-weight:800; line-height:.95;
  letter-spacing:-0.5px; color:var(--azul-profundo);
  margin:0 0 26px;
}
.contacto__texto p{ font-size:20px; line-height:1.4; color:rgba(255,255,255,.92); margin:0; }

/* Las redes quedan ancladas al borde inferior del formulario */
.contacto__redes{ display:flex; gap:20px; margin-top:auto; padding-top:44px; }
.contacto__redes img{ width:44px; height:45px; }

/* Alineado con el borde izquierdo de la caja del formulario */
.contacto__obligatorios{
  position:relative; z-index:2;
  font-family:'Poppins', sans-serif; font-size:16px; letter-spacing:-0.16px;
  color:#fff; margin:18px 0 0; margin-left:calc(50% + 40px);
}

/* ---------- Formulario ---------- */
.formulario{
  background:#fff; border-radius:var(--radio);
  padding:32px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 24px;
}
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo--full{ grid-column:1 / -1; }

.campo label{
  font-size:16px; font-weight:600; color:var(--gris-label);
}
.campo input, .campo select, .campo textarea{
  font-family:inherit; font-size:16px; font-weight:600; color:var(--gris-oscuro);
  background:#fff; border:1px solid var(--gris-borde); border-radius:var(--radio);
  padding:13px 20px;
  width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.campo textarea{ resize:vertical; min-height:52px; }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--gris-placeholder); font-weight:600; }
.campo select{ appearance:none; color:var(--gris-placeholder);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23183b56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center; background-size:14px;
  padding-right:48px;
}
.campo select:valid{ color:var(--gris-oscuro); }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--azul-electrico); box-shadow:0 0 0 3px rgba(8,92,240,.14); outline:none;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"]{
  border-color:#d64545; box-shadow:0 0 0 3px rgba(214,69,69,.12);
}

.boton{
  grid-column:1 / -1;
  background:var(--azul-electrico); color:#fff; border:0; border-radius:var(--radio);
  padding:18px 24px; cursor:pointer;
  font-family:inherit; font-size:18px; font-weight:700;
  transition:background .2s ease, transform .1s ease;
}
.boton:hover{ background:#0749c4; }
.boton:active{ transform:translateY(1px); }
.boton[disabled]{ opacity:.6; cursor:default; }

.formulario__aviso{
  grid-column:1 / -1; margin:0; font-size:15px; min-height:1px; color:var(--gris-texto);
}
.formulario__aviso.es-error{ color:#d64545; }
.formulario__aviso.es-ok{ color:#1d7a4c; font-weight:600; }

/* =========================================================
   PIE
   ========================================================= */
.pie{
  background:var(--azul-noche);
  padding:220px 0 64px;
  margin-top:-160px;
  position:relative; z-index:1;
}
.pie__grid{ display:flex; justify-content:space-between; align-items:flex-start; gap:48px; }
.pie__logo{ width:300px; height:auto; }
.pie__links{ display:flex; flex-direction:column; gap:14px; }
.pie__links a{
  font-size:20px; color:rgba(255,255,255,.88); text-decoration:none;
  transition:color .2s ease;
}
.pie__links a:hover{ color:#fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .equipo__head{ grid-template-columns:1fr; gap:28px; }
  .ventajas__grid{ gap:28px; }
  .contacto__grid{ gap:48px; }
  .contacto__obligatorios{ margin-left:calc(50% + 24px); }
  .contacto__caja{ padding:56px 40px 36px; }
  .cirugias__grid{ gap:40px; }
}

@media (max-width:900px){
  body{ font-size:17px; }
  .wrap{ padding-inline:22px; }

  /* Menú móvil */
  .nav{ background:rgba(6,11,53,.68); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .nav__burger{ display:flex; }
  .nav__menu{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(6,11,53,.97);
    padding:0 22px; max-height:0; overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
  }
  .nav__menu.is-open{ max-height:420px; padding:12px 22px 26px; }
  .nav__menu a{ padding:14px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav__cta{ margin-top:16px; text-align:center; border-bottom:1.5px solid #fff; }

  .hero{ min-height:88vh; }

  /* El corte forzado de la pregunta larga solo aplica en escritorio */
  .corte-desktop{ display:none; }

  /* Fondo más oscuro para que el título se lea sobre la parte clara de la foto */
  .robotica::before{
    background:linear-gradient(180deg, rgba(6,11,53,.72) 0%, rgba(6,11,53,.42) 55%, rgba(6,11,53,.28) 100%);
  }
  .robotica .wrap{ max-width:var(--ancho); }

  .robotica__grid,
  .cirugias__grid,
  .ventajas__grid,
  .contacto__grid{ grid-template-columns:1fr; }

  /* Orden en mobile: título, texto, formulario, obligatorios y al final las redes */
  .contacto__caja{ display:flex; flex-direction:column; gap:24px; }
  .contacto__grid{ display:contents; }
  .contacto__texto{ display:contents; }
  .contacto__titulo{ order:1; margin:0; }
  .contacto__texto p{ order:2; margin:0; }
  .formulario{ order:3; }
  .contacto__obligatorios{ order:4; margin:0; margin-left:0; }
  .contacto__redes{ order:5; margin:0; padding-top:4px; }
  .contacto__marcas{ z-index:0; }
  .contacto__titulo,
  .contacto__texto p,
  .formulario,
  .contacto__obligatorios,
  .contacto__redes{ position:relative; z-index:2; }

  .pie{ margin-top:-120px; padding:170px 0 56px; }

  .robotica{ padding:64px 0; }
  .robotica__img{ order:2; }
  .robotica__img img{ max-width:100%; }

  .cirugias__fotos{ padding-bottom:90px; }
  .cirugias__foto--a img{ height:400px; }
  .cirugias__foto--b img{ height:260px; }

  .ventaja{ min-height:0; padding:28px 26px 32px; }
  .ventaja__icono{ width:76px; height:76px; }

  .contacto__marcas img{ width:240px; opacity:.13; }
  .formulario{ padding:24px; gap:16px; }

  .faq__pregunta{ font-size:17px; gap:20px; }
  .faq__respuesta > p{ font-size:16px; padding-right:0; }

  .pie__grid{ flex-direction:column; align-items:center; text-align:center; }
  .pie__logo{ width:240px; }
  .pie__links{ align-items:center; }
  .pie__links a{ font-size:17px; }
}

@media (max-width:640px){
  .quienes, .ventajas, .faq{ padding:64px 0 72px; }
  .equipo, .cirugias{ padding:64px 0 72px; }

  .tabs{ gap:18px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; }
  .tabs__btn{ white-space:nowrap; font-size:16px; }

  .medico{ flex:0 0 220px; }
  .medico__foto{ width:220px; height:220px; }
  .medico__linkedin{ width:30px; height:30px; right:10px; bottom:10px; }
  .medico__linkedin svg{ width:15px; height:15px; }

  .cirugia{ gap:16px; }
  .cirugia__icono{ flex-basis:64px; width:64px; height:64px; }
  .cirugia__icono img{ width:100%; height:100%; }
  .cirugia h3{ font-size:20px; }

  .contacto__caja{ padding:40px 20px 28px; border-radius:12px; }
  .formulario{ grid-template-columns:1fr; }
  .contacto__texto p{ font-size:17px; }
}

/* =========================================================
   APARICIÓN AL SCROLLEAR
   La clase la agrega el JavaScript. Si el JS no corre,
   todo se ve normal: nada queda invisible.
   ========================================================= */
.aparece{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.aparece.es-visible{ opacity:1; transform:none; will-change:auto; }

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .hero__logo{ opacity:1; transform:none; }
  .aparece{ opacity:1; transform:none; }
}