/* Landing de Ortodoncia - Clinica Soto de la Moraleja
   Paleta y tipografia tomadas de clinicasotodelamoraleja.com */

:root{
  --oro:#a29171;
  --negro:#0a0a0a;
  --crema:#ede6dc;
  --beige:#cebba8;
  --blanco:#ffffff;
  --turquesa:#0ea5a4;
  --whatsapp:#25D366;        /* verde oficial de WhatsApp, lo pidio Giuseppe el 20/08 */
  --whatsapp-hover:#1FAF54;
}

body{
  font-family:'Lato', Arial, sans-serif;
  color:var(--negro);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display', Georgia, serif;font-weight:700;line-height:1.22;}
h2{font-size:clamp(1.65rem,3.3vw,2.45rem);}
h3{font-size:1.25rem;}
p{font-size:1.08rem;line-height:1.8;max-width:60ch;}
.text-center p{margin-left:auto;margin-right:auto;}
img{max-width:100%;}
a{color:var(--oro);}
.btn{border-radius:0;letter-spacing:.5px;}
.text-oro{color:var(--oro)!important;}
.bg-crema{background-color:var(--crema)!important;}
.bg-beige{background-color:var(--beige)!important;}
.bg-negro{background-color:var(--negro)!important;}

.btn-oro{background:var(--oro);border:1px solid var(--oro);color:#fff;font-weight:700;padding:.85rem 1.6rem;}
.btn-oro:hover,.btn-oro:focus{background:#8f7f61;border-color:#8f7f61;color:#fff;}
.btn-oro-outline{background:transparent;border:1px solid var(--oro);color:var(--oro);font-weight:700;padding:.85rem 1.6rem;}
.btn-oro-outline:hover,.btn-oro-outline:focus{background:var(--oro);color:#fff;}
.btn-wa{background:var(--whatsapp);border:1px solid var(--whatsapp);color:var(--negro);font-weight:700;padding:.85rem 1.6rem;}
.btn-wa:hover,.btn-wa:focus{background:var(--whatsapp-hover);border-color:var(--whatsapp-hover);color:var(--negro);}
.btn-blanco-outline{background:rgba(255,255,255,.08);border:1px solid #fff;color:#fff;font-weight:700;padding:.85rem 1.6rem;}
.btn-blanco-outline:hover,.btn-blanco-outline:focus{background:#fff;color:var(--negro);}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--oro);outline-offset:2px;
}

/* Eyebrow / antetitulo */
.eyebrow{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);font-weight:700;margin-bottom:.9rem;display:block;
}
.regla{width:56px;height:2px;background:var(--oro);border:0;opacity:1;margin:1.1rem 0;}
.regla-c{margin-left:auto;margin-right:auto;}

/* En movil el container ocupa todo el ancho y un row con g-5 (margenes de -24px)
   se sale de la pantalla. Se baja el gutter por debajo de 992px. */
@media(max-width:991px){
  .row.g-5{--bs-gutter-x:1.5rem;--bs-gutter-y:2rem;}
}
section{padding:88px 0;}
@media(max-width:767px){section{padding:58px 0;} p{font-size:1.02rem;}}

/* Lo importante de un bloque, en lista con icono en vez de parrafo corrido. */
.lista-clave{list-style:none;padding:0;margin:1.6rem 0 0;}
.lista-clave li{
  position:relative;padding:11px 0 11px 34px;font-size:1.03rem;line-height:1.6;
  border-top:1px solid var(--crema);
}
.lista-clave li:first-child{border-top:0;}
.lista-clave i{position:absolute;left:0;top:15px;color:var(--oro);font-size:1.15rem;}

/* Barra superior */
.barra-top{background:var(--negro);color:#cfc7ba;font-size:.85rem;padding:7px 0;}
.barra-top a{color:#cfc7ba;text-decoration:none;}
.barra-top a:hover{color:#fff;text-decoration:underline;}

.cabecera{background:#fff;border-bottom:1px solid var(--crema);padding:12px 0;position:sticky;top:0;z-index:1030;}
/* La marca en la cabecera, con el mismo patron que su web (isotipo + nombre),
   pero a mas tamano para que tenga presencia. */
.cabecera .marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--negro);}
.cabecera .marca img{height:56px;width:auto;}
.cabecera .marca-texto{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:1.5rem;line-height:1.05;display:block;
}
.cabecera .marca-texto small{
  display:block;font-size:.98rem;font-weight:400;letter-spacing:.02em;color:#4a443c;
}
.cabecera .marca:hover .marca-texto{color:var(--oro);}
/* El CTA de cabecera lleva un texto largo ("Pedir primera visita sin coste"),
   asi que en pantallas estrechas se ajusta para que quepa junto a la marca. */
.cabecera .btn-cabecera{padding:.7rem 1.15rem;}
@media(max-width:767px){
  .cabecera .btn-cabecera{font-size:.82rem;padding:.6rem .8rem;line-height:1.15;max-width:9.5rem;}
}
@media(max-width:575px){
  .cabecera .marca{gap:10px;}
  .cabecera .marca img{height:42px;}
  .cabecera .marca-texto{font-size:1.15rem;}
  .cabecera .marca-texto small{font-size:.8rem;}
}

/* Hero */
.hero{
  position:relative;color:#fff;padding:0;
  background:#0a0a0a;
}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 12% 20%, rgba(162,145,113,.22) 0%, rgba(10,10,10,0) 62%);}
.hero-foto{position:relative;}
.hero-foto img{width:100%;height:520px;object-fit:cover;object-position:center 42%;}
@media(max-width:991px){.hero-foto img{height:250px;}}
.hero .hero-inner{position:relative;z-index:2;padding-top:88px;padding-bottom:76px;}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.16;color:#fff;}
.hero h1 em{font-style:normal;color:var(--beige);}
.hero .lead-hero{font-size:clamp(1rem,2.2vw,1.2rem);color:#e7e1d8;max-width:34rem;}
.hero .eyebrow{color:var(--beige);}
.hero-puntos{list-style:none;padding:0;margin:1.6rem 0 0;}
.hero-puntos li{padding:5px 0;color:#e7e1d8;font-size:1rem;}
.hero-puntos i{color:var(--beige);margin-right:.55rem;}

/* Franja de confianza */
.franja{background:var(--crema);padding:34px 0;}
.franja .dato{text-align:center;padding:10px 6px;}
.franja .dato i{font-size:1.7rem;color:var(--oro);display:block;margin-bottom:.4rem;}
.franja .dato strong{display:block;font-size:1.05rem;font-weight:700;}
.franja .dato span{font-size:.9rem;color:#5c5449;}

/* Tarjetas de tratamiento */
.tarjeta{background:#fff;border:1px solid var(--crema);height:100%;padding:30px 26px;transition:border-color .25s,transform .25s;}
.tarjeta:hover{border-color:var(--oro);transform:translateY(-4px);}
.tarjeta i{font-size:1.9rem;color:var(--oro);}
.tarjeta h3{font-size:1.22rem;margin:.9rem 0 .5rem;}
.tarjeta p{font-size:1rem;margin:0;color:#4a443c;}

/* Doctora */
.doctora-foto{position:relative;}
.doctora-foto img{width:100%;object-fit:cover;}
.credencial{list-style:none;padding:0;margin:1.4rem 0 0;}
.credencial li{padding:7px 0 7px 30px;position:relative;font-size:1.02rem;}
.credencial li::before{content:"\F26E";font-family:'bootstrap-icons';position:absolute;left:0;top:6px;color:var(--oro);}

/* Antes y despues: comparador */
.comparador{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:var(--crema);border:1px solid var(--beige);
  touch-action:none;user-select:none;cursor:ew-resize;
}
.comparador .capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:18px;}
.comparador .capa-antes{align-items:flex-start;padding-left:6%;}
.comparador .capa-despues{align-items:flex-end;padding-right:6%;}
.comparador .capa>i,.comparador .capa>small{width:38%;}
.comparador .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.comparador .capa-antes{background:var(--beige);}
.comparador .capa-despues{background:var(--crema);clip-path:inset(0 0 0 50%);}
.comparador .capa i{font-size:2rem;color:#7a6c52;opacity:.75;}
.comparador .capa small{display:block;margin-top:.5rem;font-size:.78rem;color:#5c5343;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;}
.comparador .etiqueta{
  position:absolute;top:12px;background:rgba(10,10,10,.72);color:#fff;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;z-index:4;
}
.comparador .et-antes{left:12px;}
.comparador .et-despues{right:12px;}
.comparador .tirador{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:5;transform:translateX(-1px);box-shadow:0 0 6px rgba(0,0,0,.35);}
.comparador .tirador .asa{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;color:var(--oro);font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.caso-pie{font-size:.9rem;color:#6b6154;margin-top:.7rem;}

/* Ventajas */
.ventaja{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--crema);}
.ventaja i{color:var(--oro);font-size:1.3rem;line-height:1.5;}
.ventaja p{margin:0;font-size:1.03rem;}

/* Primera visita */
.incluye{list-style:none;padding:0;margin:0;}
.incluye li{padding:12px 0 12px 34px;position:relative;border-bottom:1px solid rgba(162,145,113,.25);font-size:1.05rem;}
.incluye li:last-child{border-bottom:0;}
.incluye li::before{content:"\F633";font-family:'bootstrap-icons';position:absolute;left:0;top:11px;color:var(--oro);font-size:1.15rem;}

/* Resenas */
.resena{background:#fff;border-left:3px solid var(--oro);padding:26px 24px;height:100%;}
.resena .estrellas{color:var(--oro);letter-spacing:2px;margin-bottom:.7rem;}
.resena p{font-size:1rem;font-style:italic;color:#403b34;}
.resena .autor{font-weight:700;font-size:.95rem;margin-top:1rem;}
.resena .fuente{font-size:.82rem;color:#7a7267;}

/* Contacto */
.form-control,.form-select{border-radius:0;border:1px solid var(--beige);padding:.8rem .9rem;}
.form-control:focus{border-color:var(--oro);box-shadow:0 0 0 .18rem rgba(162,145,113,.22);}
.form-label{font-size:.9rem;font-weight:700;letter-spacing:.02em;}
.aviso-preview{background:var(--crema);border-left:3px solid var(--oro);padding:12px 14px;font-size:.9rem;color:#4a443c;}
.dato-contacto{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.dato-contacto i{color:var(--beige);font-size:1.25rem;}
.dato-contacto a{color:#fff;text-decoration:none;}
/* Todo lo que lleva a WhatsApp va en su verde, tambien este enlace. */
.dato-contacto .icono-wa{color:var(--whatsapp);}
.dato-contacto a.enlace-wa{color:var(--whatsapp);font-weight:700;}
.dato-contacto a:hover{text-decoration:underline;}
.mapa{width:100%;height:320px;border:0;filter:grayscale(.25);}

/* Botones flotantes */
.flotante{position:fixed;bottom:18px;z-index:1050;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;
  text-decoration:none;box-shadow:0 3px 12px rgba(0,0,0,.28);}
.flotante-wa{right:16px;background:var(--whatsapp);color:var(--negro);}
.flotante-wa:hover{background:var(--whatsapp-hover);color:var(--negro);}
.flotante-tel{left:16px;background:var(--oro);}
.flotante:hover{color:#fff;opacity:.9;}
@media(min-width:992px){.flotante-tel{display:none;}}

footer{background:var(--negro);color:#a09a91;font-size:.9rem;padding:48px 0 34px;}
.logo-pie{width:190px;height:auto;opacity:.9;}
footer a{color:#cfc7ba;text-decoration:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  [data-aos]{opacity:1!important;transform:none!important;}
}

/* Subtitulo del hero (H2 bajo el H1) */
.hero .hero-sub{
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  line-height:1.35;
  font-weight:600;
  color:var(--beige);
  max-width:36rem;
  margin:.85rem 0 0;
}
@media(max-width:575px){
  .hero h1{font-size:1.72rem;line-height:1.2;}
  .hero .hero-sub{font-size:1.02rem;}
}

/* El H1 primero y el CTA antes de la lista de puntos, en todos los tamanos */
.hero .col-lg-7{display:flex;flex-direction:column;}
.hero .hero-botones{order:2;}
.hero .hero-puntos{order:3;margin-top:1.6rem;}
@media(max-width:575px){
  .hero .hero-inner{padding-top:52px;padding-bottom:48px;}
  .hero .hero-botones{margin-top:1.4rem!important;}
  .hero .hero-puntos li{font-size:.94rem;}
}