@font-face{
  font-family:'Abramo Script';
  src:url('../fonts/Abramo-Font/Abramo Script.woff2') format('woff2');
  font-display:swap;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --paper:#fbfaf7;
  --cream:#f5f2ec;
  --cream-2:#efeae1;
  --navy:#18394d;
  --navy-dark:#0c2637;
  --gold:#a9872f;
  --gold-dark:#8d6f20;
  --brown:#4a3025;
  --gray:#747474;
  --gray-soft:#a2a2a2;
  --line:#e5e0d8;
  --white:#fff;
  --header-h:92px;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Questrial',Arial,sans-serif;
  color:var(--navy);
  background:var(--paper);
  line-height:1.45;
  overflow-x:hidden;
}

a{
  color:inherit;
}

img{
  max-width:100%;
}

button,
input,
textarea,
select{
  font:inherit;
}

.container{
  width:min(1280px,calc(100% - 72px));
  margin-inline:auto;
}

.wide-container{
  width:min(1440px,calc(100% - 72px));
  margin-inline:auto;
}


/* ========================================
   HEADER
======================================== */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  min-height:var(--header-h);
  background:rgba(251,250,247,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(24,57,77,.08);
}

.nav{
  width:min(1440px,calc(100% - 72px));
  margin:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.logo{
  width:255px;
  display:block;
  line-height:0;
  flex:0 0 auto;
}

.logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.nav-links{
  display:flex;
  list-style:none;
  align-items:center;
  gap:4px;
}

.nav-links a{
  display:block;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.02em;
  padding:12px 14px;
  position:relative;
  color:var(--navy);
  transition:.2s ease;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:1.5px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--gold-dark);
}

.nav-links a:hover::after,
.nav-links a.active::after{
  transform:scaleX(1);
}

.menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.menu-btn span{
  width:24px;
  height:1.5px;
  background:var(--navy);
  transition:.25s;
}

.menu-btn.open span:nth-child(1){
  transform:translateY(6.5px) rotate(45deg);
}

.menu-btn.open span:nth-child(2){
  opacity:0;
}

.menu-btn.open span:nth-child(3){
  transform:translateY(-6.5px) rotate(-45deg);
}

.page{
  padding-top:var(--header-h);
  min-height:100vh;
}


/* ========================================
   BOTÓN REGRESAR
======================================== */

.back-row{
  padding:24px 0 12px;
}

.back-btn{
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  letter-spacing:.04em;
  padding:8px 0;
}

.back-btn span{
  font-size:20px;
  line-height:1;
  color:var(--gold);
}

.back-btn:hover{
  color:var(--gold-dark);
}


/* ========================================
   HOME / PORTADA
======================================== */

.home-page{
  background:#fff;
}

.home-cover{
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:stretch;
  background:#fff;
}


/*
  DISTRIBUCIÓN GENERAL DE LA PORTADA

  Primera columna  = texto
  Segunda columna  = fotografía

  Si quieres aún MÁS grande la fotografía:
  cambia 700px por 750px u 800px.
*/
.home-grid{
  width:min(1460px,calc(100% - 56px));
  margin-inline:auto;

  display:grid;

  grid-template-columns:
    minmax(0,.90fr)
    minmax(700px,1.10fr);

  gap:18px;

  align-items:center;

  padding:42px 0 38px;
}


/* BLOQUE IZQUIERDO */

.home-copy{
  min-width:0;

  padding:12px 0 8px;

  min-height:620px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}


/*
  BLOQUE DEL TEXTO:

  TU SONRISA
  ES NUESTRO
        Arte
*/
.home-lockup{
  position:relative;

  width:min(100%,760px);

  min-height:300px;

  padding-top:46px;
}


/* TU SONRISA */

.home-line-primary{
  font-size:clamp(62px,5.4vw,86px);

  line-height:.92;

  letter-spacing:-.045em;

  color:var(--navy);

  white-space:nowrap;
}


/* ES NUESTRO */

.home-line-secondary{
  margin-top:14px;

  font-size:clamp(38px,3.25vw,52px);

  line-height:1;

  letter-spacing:-.025em;

  color:#8b8b8b;

  white-space:nowrap;
}


/*
  PALABRA ARTE

  left = mover izquierda/derecha
  top  = mover arriba/abajo

  Más derecha:
  left:56%;

  Más abajo:
  top:90px;
*/
.home-script{
  font-family:
    'Abramo Script',
    'Brush Script MT',
    cursive;

  position:absolute;

  left:50%;

  top:60px;

  font-size:300px;

  line-height:.8;

  color:#806413;

  transform:rotate(-4deg);

  transform-origin:center;

  font-weight:400;

  pointer-events:none;

  white-space:nowrap;
}


/* PARTE INFERIOR DEL TEXTO */

.home-lower{
  width:min(100%,760px);
  padding-bottom:4px;
}

.home-intro{
  max-width:640px;

  color:#777;

  font-size:18px;

  line-height:1.55;

  border:0;

  padding:0;
}

.home-intro span{
  color:var(--gold-dark);
}


/* BOTONES */

.home-actions{
  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  min-height:48px;

  padding:12px 22px;

  text-decoration:none;

  border-radius:2px;

  font-size:13px;

  letter-spacing:.035em;

  transition:.25s ease;

  border:1px solid transparent;
}

.btn-gold,
.btn-gold-square{
  background:var(--gold);
  color:#fff;
}

.btn-gold:hover,
.btn-gold-square:hover{
  background:var(--gold-dark);
  transform:translateY(-2px);
}

.btn-light{
  border-color:#d7d2ca;
  background:#fff;
  color:var(--navy);
}

.btn-light:hover{
  border-color:var(--gold);
  color:var(--gold-dark);
  transform:translateY(-2px);
}


/* GUAYAQUIL — ECUADOR */

.home-location-text{
  margin-top:20px;

  color:#727272;

  font-size:14px;

  letter-spacing:.01em;
}


/* ========================================
   FOTOGRAFÍA PORTADA
======================================== */

.home-visual{
  position:relative;

  min-width:0;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  overflow:visible;

  /* IMPORTANTE */
  background:transparent;
}


/*
  CONTENEDOR DE LA FOTO

  width = tamaño de la imagen.

  transform translateX = mover a la derecha.

  Si quieres moverla más:
  translateX(40px)
  translateX(60px)
  translateX(80px)
*/
.home-photo-frame{
  position:relative;

  width:98%;

  aspect-ratio:1 / 1;

  height:auto;

  min-height:0;

  overflow:hidden;

  border-radius:0;

  /* SIN FONDO CAFÉ */
  background:transparent;

  /* MOVER FOTO A LA DERECHA */
  transform:translateX(120px);
}


/* eliminar cualquier capa encima */

.home-photo-frame::after{
  display:none;
}


/*
  IMAGEN REAL

  object-fit:cover mantiene la persona grande.

  NO usar contain aquí porque puede hacer
  que la persona se vea mucho más pequeña.
*/
.home-photo-frame img{
  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center center;

  display:block;

  /* TRANSPARENCIA */
  background:transparent;
}


/* ========================================
   GENERAL HEADINGS
======================================== */

.section-page{
  padding:20px 0 86px;
}

.eyebrow{
  color:var(--gold);

  font-size:11px;

  letter-spacing:.22em;

  text-transform:uppercase;

  margin-bottom:13px;
}

.standard-heading{
  max-width:900px;

  margin:24px 0 45px;
}

.standard-heading h1,
.services-heading h1{
  font-weight:400;

  letter-spacing:-.025em;

  line-height:1.02;

  color:var(--navy);
}

.standard-heading h1{
  font-size:clamp(48px,6vw,82px);
}

.standard-heading p{
  font-size:17px;

  color:#70767a;

  max-width:720px;

  margin-top:17px;
}


/* ========================================
   SERVICIOS
======================================== */

.services-page{
  background:#fff;
}

.services-heading{
  margin:30px 0 48px;
}

.services-heading .eyebrow{
  margin-bottom:10px;
}

.services-heading h1{
  font-size:clamp(46px,5.2vw,78px);
}

.services-heading p{
  margin-top:16px;

  color:#7a7f82;

  font-size:17px;

  line-height:1.5;
}

.services-grid{
  display:grid;

  grid-template-columns:repeat(
    4,
    minmax(0,1fr)
  );

  gap:24px 20px;
}

.service-card{
  display:flex;

  flex-direction:column;

  text-decoration:none;

  background:#fff;

  border:1px solid #ece8e2;

  border-radius:14px;

  overflow:hidden;

  min-width:0;

  box-shadow:
    0 8px 26px
    rgba(22,52,70,.045);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.service-card:hover{
  transform:translateY(-7px);

  box-shadow:
    0 18px 46px
    rgba(22,52,70,.12);

  border-color:#d7c79c;
}

.service-image{
  height:235px;

  overflow:hidden;

  background:#e7e4df;
}

.service-image img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .45s ease;
}

.service-card:hover .service-image img{
  transform:scale(1.04);
}

.service-copy{
  padding:20px 20px 22px;

  display:flex;

  flex-direction:column;

  flex:1;
}

.service-copy h2{
  font-size:21px;

  font-weight:400;

  line-height:1.16;

  color:var(--navy);
}

.service-copy p{
  font-size:14px;

  color:#85888a;

  line-height:1.45;

  margin-top:9px;

  min-height:40px;
}

.service-more{
  margin-top:auto;

  padding-top:17px;

  color:var(--gold);

  font-size:13px;
}

.service-more b{
  font-weight:400;

  font-size:18px;

  margin-left:7px;
}

.service-card:hover .service-more{
  color:var(--gold-dark);
}


/* ========================================
   DETALLE DE SERVICIOS
======================================== */

.detail-topbar{
  padding-top:5px;
}

.service-hero{
  position:relative;

  min-height:500px;

  display:flex;

  align-items:center;

  overflow:hidden;

  background:var(--navy-dark);
}


/* FOTO GRANDE DEL SERVICIO */

/* FOTO DEL SERVICIO: SOLO HACIA LA DERECHA */
.service-hero-photo{
  position:absolute;

  top:0;
  right:0;

  width:60%;
  height:100%;

  object-fit:cover;
  object-position: center;

  display:block;

  /*
    Hace que la foto se desvanezca
    suavemente hacia la izquierda
  */
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.20) 8%,
    rgba(0,0,0,.65) 20%,
    #000 36%,
    #000 100%
  );

  mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.20) 8%,
    rgba(0,0,0,.65) 20%,
    #000 36%,
    #000 100%
  );
}


/* FONDO OSCURO DEL HERO */
.service-hero{
  position:relative;

  min-height:500px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:#0c2637;
}


/*
  Solo una capa muy ligera encima.
  Ya no necesitamos oscurecer toda la fotografía.
*/
.service-hero-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    90deg,

    rgba(6,31,48,.98) 0%,

    rgba(6,31,48,.92) 25%,

    rgba(6,31,48,.55) 45%,

    rgba(6,31,48,.12) 70%,

    rgba(6,31,48,0) 100%
  );
}

/*
  CAPA OSCURA

  Más oscura detrás del texto.
  Mucho más clara hacia la derecha
  para que la fotografía se aprecie.
*/
.service-hero-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,

      rgba(6,31,48,.94) 0%,

      rgba(6,31,48,.86) 24%,

      rgba(6,31,48,.58) 43%,

      rgba(6,31,48,.28) 58%,

      rgba(6,31,48,.08) 75%,

      rgba(6,31,48,0) 100%
    );
}

.service-hero-inner{
  position:relative;
  z-index:2;
  padding:58px 0;
}

.service-hero-copy{
  width:min(560px,90%);
}

.service-hero-copy .eyebrow{
  font-size:12px;

  margin-bottom:22px;
}

.service-hero-copy h1{
  font-size:clamp(46px,5.3vw,78px);

  line-height:1.04;

  color:#fff;

  font-weight:400;

  letter-spacing:-.025em;

  max-width:650px;
}

.service-hero-copy p{
  color:rgba(255,255,255,.88);

  font-size:17px;

  line-height:1.55;

  margin-top:20px;

  max-width:560px;
}

.btn-gold-square{
  margin-top:28px;

  border-radius:3px;

  padding-inline:24px;

  letter-spacing:.12em;

  font-size:11px;
}

.need-section,
.cases-section,
.faq-section{
  background:#fff;
}

.process-section,
.treatments-section{
  background:#f7f4ee;
}

.need-section,
.process-section,
.treatments-section,
.cases-section,
.faq-section{
  padding:54px 0;
}

.split-section{
  display:grid;

  grid-template-columns:280px 1fr;

  gap:58px;

  align-items:start;
}

.section-side-title h2,
.section-inline-heading h2{
  font-size:30px;

  font-weight:400;

  line-height:1.13;

  color:var(--navy);

  letter-spacing:-.015em;
}

.section-side-title .eyebrow{
  line-height:1.5;
}

.side-note{
  font-size:13px;

  color:#85898c;

  margin-top:16px;

  line-height:1.5;
}

.needs-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:0;
}

.need-item{
  min-height:155px;

  padding:8px 24px;

  text-align:center;

  border-left:1px solid #e6e2da;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;
}

.need-item:first-child{
  border-left:0;
}

.need-icon{
  width:54px;

  height:54px;

  border:1px solid #d7c79c;

  border-radius:50%;

  display:grid;

  place-items:center;

  color:var(--gold);

  margin-bottom:16px;
}

.need-icon svg{
  width:29px;

  height:29px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.5;

  stroke-linecap:round;

  stroke-linejoin:round;
}

.need-item p{
  font-size:14px;

  line-height:1.4;

  color:#5e666b;

  max-width:170px;
}


/* PROCESO */

.process-grid{
  display:grid;

  grid-template-columns:
    1fr 42px
    1fr 42px
    1fr;

  align-items:start;

  gap:8px;
}

.process-step{
  position:relative;

  min-width:0;
}

.step-number{
  display:inline-block;

  color:var(--gold);

  font-size:18px;

  margin-right:8px;
}

.process-icon{
  width:56px;

  height:56px;

  border:1px solid #e1ddd5;

  border-radius:50%;

  background:#fff;

  display:inline-grid;

  place-items:center;

  color:var(--navy);

  font-size:24px;

  vertical-align:middle;
}

.process-step h3{
  font-size:15px;

  font-weight:400;

  color:var(--navy);

  margin-top:16px;
}

.process-step p{
  font-size:13px;

  color:#777f83;

  line-height:1.45;

  margin-top:6px;
}

.process-arrow{
  padding-top:24px;

  text-align:center;

  color:#9ba2a6;

  font-size:24px;
}


/* TRATAMIENTOS */

.section-inline-heading{
  margin-bottom:24px;
}

.treatments-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:15px;
}

.treatment-card{
  background:#fff;

  border:1px solid #ebe6dd;

  padding:22px;

  border-radius:8px;

  min-height:125px;
}

.treatment-card h3{
  font-size:16px;

  font-weight:400;

  color:var(--navy);
}

.treatment-card p{
  font-size:13px;

  color:#7c8387;

  line-height:1.5;

  margin-top:8px;
}


/* CASOS */

.cases-layout{
  align-items:center;
}

.case-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;
}

.case-card{
  position:relative;

  height:260px;

  border-radius:10px;

  overflow:hidden;

  background:#e9e5df;

  border:1px solid #e7e1d8;
}

.case-card img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;
}

.media-slot .media-placeholder{
  position:absolute;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  text-align:center;

  color:#9b8a5d;

  background:
    linear-gradient(
      135deg,
      #f2eee7,
      #e8e1d6
    );

  font-size:12px;

  letter-spacing:.16em;
}

.media-slot .media-placeholder small{
  letter-spacing:.03em;

  color:#8b8f92;

  margin-top:8px;
}

.media-slot img:not(.is-missing)
+ .media-placeholder[hidden]{
  display:none;
}


/* PREGUNTAS */

.faq-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.faq-grid details{
  background:#fafafa;

  border:1px solid #ece9e4;

  border-radius:6px;

  padding:0 18px;
}

.faq-grid summary{
  min-height:52px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;

  list-style:none;

  color:var(--navy);

  font-size:14px;
}

.faq-grid summary::-webkit-details-marker{
  display:none;
}

.faq-grid summary::after{
  content:"⌄";

  font-size:18px;

  color:var(--navy);
}

.faq-grid details[open] summary::after{
  content:"⌃";
}

.faq-grid details p{
  font-size:13px;

  color:#777f83;

  padding:0 0 16px;

  line-height:1.5;
}


/* CTA */

.detail-cta{
  padding:20px 0 54px;

  background:#fff;
}

.cta-box{
  background:
    linear-gradient(
      90deg,
      #f6f2eb,
      #f0ece4
    );

  border-radius:14px;

  padding:24px 34px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;
}

.cta-box h2{
  font-size:21px;

  font-weight:400;

  color:var(--navy);
}

.cta-box p{
  font-size:13px;

  color:#7c8285;

  margin-top:3px;
}

.btn-whatsapp{
  border:1px solid #b99a50;

  color:var(--navy);

  background:#fff;

  border-radius:3px;

  font-size:11px;

  letter-spacing:.09em;
}

.btn-whatsapp:hover{
  background:var(--gold);

  color:#fff;
}

/* ========================================
   VIDEOS
======================================== */

.video-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;
}


/* ========================================
   TARJETA
======================================== */

.video-card{
  position:relative;

  aspect-ratio:9 / 16;

  overflow:hidden;

  border-radius:14px;

  background:transparent;

  /* SIN MARCO OSCURO */
  border:1px solid transparent;

  outline:none;

  box-shadow:
    0 12px 32px
    rgba(17,48,67,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


/* Marco interior elegante */
.video-card::before{
  content:"";

  position:absolute;

  inset:5px;

  z-index:5;

  border-radius:10px;

  border:1px solid transparent;

  pointer-events:none;

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}


@media (hover:hover){

  .video-card:hover::before{
    border-color:rgba(255,255,255,.38);

    box-shadow:
      inset 0 0 18px
      rgba(255,255,255,.06);
  }

}


/* ========================================
   HOVER
======================================== */

@media (hover:hover){

  .video-card:hover{
    transform:translateY(-8px);

    border-color:
      rgba(169,135,47,.70);

    box-shadow:
      0 22px 55px
      rgba(17,48,67,.16);
  }


  .video-card:hover::before{
    border-color:
      rgba(255,255,255,.45);

    box-shadow:
      inset 0 0 22px
      rgba(255,255,255,.08);
  }


  .video-card:hover .video-player{
    transform:scale(1.025);
  }

}


/* ========================================
   VIDEO
======================================== */

.video-player{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  background:transparent;

  border:0;
  outline:0;

  border-radius:inherit;

  transition:
    transform .55s ease,
    filter .35s ease;
}


/* ========================================
   CONTROLES PERSONALIZADOS
======================================== */

.custom-controls{
  position:absolute;

  z-index:10;

  left:12px;

  right:12px;

  bottom:12px;


  min-height:48px;


  display:flex;

  align-items:center;

  gap:10px;


  padding:8px 11px;


  border-radius:14px;


  background:
    rgba(10,25,34,.68);


  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);


  border:
    1px solid
    rgba(255,255,255,.16);


  box-shadow:
    0 8px 28px
    rgba(0,0,0,.20);


  transition:
    opacity .3s ease,
    transform .3s ease;
}


/* ========================================
   BOTONES
======================================== */

.custom-controls button{
  width:32px;

  height:32px;

  flex:0 0 32px;


  display:grid;

  place-items:center;


  border:0;

  border-radius:50%;


  background:
    rgba(255,255,255,.10);


  color:#fff;


  cursor:pointer;


  font-size:14px;


  transition:
    background .2s ease,
    transform .2s ease;
}


.custom-controls button:hover{
  background:
    rgba(169,135,47,.85);

  transform:scale(1.07);
}


/* PLAY */

.video-play{
  padding-left:2px;
}


/* ========================================
   TIEMPO
======================================== */

.video-time{
  color:#fff;

  font-size:11px;

  white-space:nowrap;

  opacity:.88;
}


/* ========================================
   BARRA DE PROGRESO
======================================== */

.video-progress{
  flex:1;

  min-width:0;

  height:4px;

  appearance:none;

  -webkit-appearance:none;

  background:
    rgba(255,255,255,.35);

  border-radius:10px;

  cursor:pointer;
}


/* Chrome / Edge */

.video-progress::-webkit-slider-thumb{
  appearance:none;

  -webkit-appearance:none;

  width:12px;

  height:12px;

  border-radius:50%;

  background:#fff;

  cursor:pointer;

  box-shadow:
    0 0 0 3px
    rgba(169,135,47,.25);
}


/* Firefox */

.video-progress::-moz-range-thumb{
  width:12px;

  height:12px;

  border:0;

  border-radius:50%;

  background:#fff;

  cursor:pointer;
}


/* ========================================
   CONTROLES NATIVOS
======================================== */

/*
  En caso de que algún navegador intente
  mostrar controles internos.
*/

.video-player::-webkit-media-controls{
  display:none !important;
}


/* ========================================
   CELULAR
======================================== */

@media(max-width:620px){

  .video-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }


  .video-card{
    border-radius:12px;
  }


  .custom-controls{
    left:7px;

    right:7px;

    bottom:7px;

    min-height:42px;

    padding:6px 7px;

    gap:6px;

    border-radius:11px;
  }


  .custom-controls button{
    width:29px;

    height:29px;

    flex-basis:29px;

    font-size:12px;
  }

@media(max-width:620px){

  .video-card:active,
  .video-card:focus-within{
    border-color:rgba(169,135,47,.55);

    box-shadow:
      0 15px 35px rgba(17,48,67,.14),
      0 0 0 2px rgba(169,135,47,.07);
  }

}



  .video-time{
    display:none;
  }


  /*
    En celular no hace falta mostrar
    control de volumen porque el teléfono
    ya controla el volumen físicamente.
  */

  .video-volume{
    display:none !important;
  }


  .video-progress{
    height:3px;
  }


  .video-progress::-webkit-slider-thumb{
    width:10px;

    height:10px;
  }

}


/* ========================================
   CONTACTO
======================================== */

.contact-grid{
  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:24px;
}

.contact-info,
.map-box{
  border:1px solid var(--line);

  border-radius:14px;

  background:#fff;
}

.contact-info{
  padding:34px;
}

.contact-info h2{
  font-weight:400;

  font-size:34px;

  line-height:1.08;
}

.contact-row{
  padding:18px 0;

  border-bottom:1px solid var(--line);
}

.contact-row:last-child{
  border-bottom:0;
}

.contact-row small{
  display:block;

  color:var(--gold);

  font-size:10px;

  letter-spacing:.15em;

  text-transform:uppercase;

  margin-bottom:5px;
}

.contact-row a{
  text-decoration:none;
}

.map-box{
  overflow:hidden;

  min-height:500px;
}

.map-box iframe{
  display:block;

  border:0;

  width:100%;

  min-height:500px;
}


/* ========================================
   FOOTER
======================================== */

.site-footer{
  background:var(--navy-dark);

  color:#fff;

  padding:24px 0;
}

.footer-inner{
  width:min(1440px,calc(100% - 72px));

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  font-size:12px;
}

.footer-inner a{
  text-decoration:none;
}

.footer-muted{
  color:#c7cdd0;
}


/* ========================================
   RESPONSIVE
======================================== */


/* LAPTOP / TABLET GRANDE */

@media(max-width:1180px){

  :root{
    --header-h:86px;
  }

  .logo{
    width:225px;
  }

  .home-grid{
    grid-template-columns:
      minmax(0,.98fr)
      minmax(540px,1.02fr);

    gap:24px;
  }

  .home-copy{
    min-height:560px;
  }

  .home-lockup{
    padding-top:44px;
  }

  .home-script{
    left:50%;

    top:72px;

    font-size:
      clamp(112px,10.5vw,156px);
  }

  .home-photo-frame{
    width:112%;

    transform:translateX(24px);
  }

  .services-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

  .needs-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .need-item:nth-child(3){
    border-left:0;
  }

  .need-item{
    border-bottom:
      1px solid #e6e2da;

    padding-block:20px;
  }

  .need-item:nth-child(3),
  .need-item:nth-child(4){
    border-bottom:0;
  }

}


/* TABLET */

@media(max-width:900px){

  .container,
  .wide-container,
  .nav,
  .footer-inner{
    width:min(
      100% - 42px,
      1440px
    );
  }

  .menu-btn{
    display:flex;
  }

  .nav-links{
    display:none;

    position:absolute;

    top:var(--header-h);

    left:0;

    right:0;

    background:
      rgba(251,250,247,.99);

    border-bottom:
      1px solid var(--line);

    padding:
      14px 21px 22px;

    flex-direction:column;

    align-items:stretch;

    gap:0;
  }

  .nav-links.open{
    display:flex;
  }

  .nav-links a{
    padding:13px 8px;
  }

  .nav-links a::after{
    left:8px;

    right:auto;

    width:50px;
  }

  .home-cover{
    background:#fff;
  }

  .home-grid{
    width:min(
      100% - 42px,
      1440px
    );

    grid-template-columns:1fr;

    padding-top:38px;

    gap:34px;
  }

  .home-copy{
    min-height:auto;

    gap:42px;
  }

  .home-lockup{
    max-width:720px;

    padding-top:42px;
  }

  .home-script{
    left:48%;

    top:70px;
  }

  .home-visual{
    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;
  }

  .home-photo-frame{
    width:100%;

    height:auto;

    aspect-ratio:1 / 1;

    min-height:0;

    border-radius:0;

    transform:none;
  }

  .services-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .split-section{
    grid-template-columns:1fr;

    gap:28px;
  }

  .section-side-title{
    max-width:520px;
  }

  .process-grid{
    grid-template-columns:
      1fr 28px
      1fr 28px
      1fr;
  }

  .treatments-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .video-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

}


/* CELULAR */

@media(max-width:620px){

  :root{
    --header-h:78px;
  }

  .container,
  .wide-container,
  .nav,
  .footer-inner{
    width:min(
      100% - 30px,
      1440px
    );
  }

  .logo{
    width:188px;
  }

  .home-grid{
    width:min(
      100% - 30px,
      1440px
    );

    padding:34px 0;
  }

  .home-copy{
    gap:30px;
  }

  .home-lockup{
    min-height:230px;

    padding-top:32px;
  }

  .home-line-primary{
    font-size:
      clamp(43px,13vw,64px);
  }

  .home-line-secondary{
    font-size:
      clamp(28px,8vw,42px);
  }

  .home-script{
    font-size:
      clamp(92px,25vw,130px);

    left:45%;

    top:68px;
  }

  .home-intro{
    font-size:16px;
  }

  .home-actions{
    flex-direction:column;

    align-items:stretch;
  }

  .home-actions .btn{
    width:100%;
  }

  .home-location-text{
    margin-top:16px;

    font-size:13px;
  }

  .home-photo-frame{
    height:auto;

    aspect-ratio:1 / 1;

    border-radius:0;
  }

  .services-heading h1{
    font-size:42px;
  }

  .services-heading p br{
    display:none;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .service-image{
    height:240px;
  }

  .detail-topbar{
    padding-top:2px;
  }

  .service-hero{
    min-height:500px;
  }

  .service-hero-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(6,31,48,.94),
        rgba(7,34,51,.64)
      );
  }

  .service-hero-copy{
    width:100%;
  }

  .service-hero-copy h1{
    font-size:44px;
  }

  .needs-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .need-item{
    padding-inline:10px;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  .process-arrow{
    transform:rotate(90deg);

    padding:0;

    height:26px;
  }

  .process-step{
    padding:6px 0 15px;
  }

  .treatments-grid{
    grid-template-columns:1fr;
  }

  .case-grid{
    grid-template-columns:1fr;
  }

  .case-card{
    height:230px;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }

  .cta-box{
    flex-direction:column;

    align-items:flex-start;

    padding:22px;
  }

  .btn-whatsapp{
    width:100%;
  }

  .video-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .video-content{
    inset:auto 12px 14px;
  }

  .video-content h2{
    font-size:16px;
  }

  .facility-feature img{
    height:340px;
  }

  .facility-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .facility-grid div{
    height:125px;
  }

  .footer-inner{
    flex-direction:column;

    align-items:flex-start;
  }

}

/* =========================================================
   SERVICIOS — DIBUJO DE CHICO PENSANDO
   ========================================================= */

.thinking-person{
  width:100%;
  max-width:230px;
  height:220px;
  justify-self:center;
  align-self:end;
  min-width:0;

  background-image:url("../img/imgpersona-pensando.svg");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
}





/* =========================================================
   SERVICIOS — BLOQUES "PUEDE AYUDARTE SI" + "NUESTRO PROCESO"
   Rediseño inspirado en Ejemplo 2: ilustración humana,
   recorrido visual e iconografía lineal.
   ========================================================= */

.need-section-example2{
  background:#fff;
  padding:38px 0 30px;
  overflow:hidden;
}

.need-example2-layout{
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(245px,300px) minmax(0,1fr);
  gap:32px;
  align-items:center;
}

.need-heading{
  align-self:start;
  padding-top:18px;
}

.need-heading .eyebrow,
.process-heading .eyebrow{
  color:var(--gold);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.20em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.need-heading h2,
.process-heading h2{
  color:var(--navy);
  font-weight:400;
  letter-spacing:-.02em;
}

.need-heading h2{
  font-size:31px;
  line-height:1.12;
}

.needs-journey{
  position:relative;
  min-width:0;
  padding-top:2px;
}

.needs-route{
  position:absolute;
  z-index:0;
  top:12px;
  left:3%;
  width:94%;
  height:70px;
  overflow:visible;
  pointer-events:none;
}

.needs-route path{
  fill:none;
  stroke:#c69c3a;
  stroke-width:1.15;
  stroke-dasharray:5 7;
  stroke-linecap:round;
  opacity:.72;
}

.need-section-example2 .needs-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.need-section-example2 .need-item{
  min-height:145px;
  padding:0 5px;
  border:0;
  background:transparent;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.need-section-example2 .need-icon{
  width:70px;
  height:70px;
  margin:0 0 16px;
  padding:8px;
  border:0;
  border-radius:0;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--navy);
}

.need-section-example2 .need-symbol{
  width:52px;
  height:52px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.need-section-example2 .need-symbol .accent{
  stroke:var(--gold);
}

.need-section-example2 .need-item p{
  max-width:175px;
  margin:0 auto;
  color:var(--navy);
  font-size:13px;
  line-height:1.45;
}

/* PROCESO — composición compacta y horizontal */
.process-section-example2{
  background:#f5f1e9;
  padding:30px 0;
}

.process-example2-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:46px;
  align-items:center;
}

.process-heading h2{
  font-size:31px;
  line-height:1.08;
}

.process-section-example2 .process-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  gap:10px;
  align-items:center;
}

.process-section-example2 .process-step{
  position:relative;
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-width:0;
  padding:0;
}

.process-section-example2 .step-number{
  position:absolute;
  left:-18px;
  top:3px;
  z-index:2;
  margin:0;
  color:var(--gold);
  font-size:15px;
  line-height:1;
}

.process-section-example2 .process-icon{
  width:58px;
  height:58px;
  margin:0;
  border:1px solid #e1d8c5;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  color:var(--navy);
  font-size:0;
  box-shadow:0 4px 14px rgba(18,47,65,.025);
}

.process-section-example2 .process-symbol{
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.process-section-example2 .process-symbol .accent{
  stroke:var(--gold);
}

.process-section-example2 .process-copy{
  min-width:0;
}

.process-section-example2 .process-step h3{
  margin:0 0 5px;
  color:var(--navy);
  font-size:14px;
  line-height:1.25;
  font-weight:400;
}

.process-section-example2 .process-step p{
  margin:0;
  color:#70787d;
  font-size:11.5px;
  line-height:1.45;
}

.process-section-example2 .process-arrow{
  padding:0;
  height:auto;
  text-align:center;
  color:var(--gold);
  font-size:23px;
  line-height:1;
  transform:none;
}

/* Laptop / tablet grande */
@media(max-width:1180px){
  .need-example2-layout{
    grid-template-columns:180px 230px minmax(0,1fr);
    gap:24px;
  }

  .thinking-person{
    height:175px;
  }

  .need-heading h2{
    font-size:28px;
  }

  .need-section-example2 .needs-grid{
    gap:10px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .need-section-example2 .need-item{
    border:0;
    padding:0 2px;
  }

  .need-section-example2 .need-item:nth-child(3),
  .need-section-example2 .need-item:nth-child(4){
    border-bottom:0;
  }

  .need-section-example2 .need-icon{
    width:64px;
    height:64px;
  }

  .need-section-example2 .need-symbol{
    width:48px;
    height:48px;
  }

  .process-example2-layout{
    grid-template-columns:205px minmax(0,1fr);
    gap:34px;
  }

  .process-section-example2 .process-grid{
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);
    gap:8px;
  }

  .process-section-example2 .process-step{
    grid-template-columns:58px minmax(0,1fr);
    gap:10px;
  }

  .process-section-example2 .process-icon{
    width:52px;
    height:52px;
  }

  .process-section-example2 .process-step p{
    font-size:11px;
  }
}

/* Tablet */
@media(max-width:900px){
  .need-section-example2{
    padding:36px 0;
  }

  .need-example2-layout{
    grid-template-columns:190px minmax(0,1fr);
    gap:22px 30px;
    align-items:center;
  }

  .thinking-person{
    grid-column:1;
    grid-row:1;
    height:170px;
  }

  .need-heading{
    grid-column:2;
    grid-row:1;
    align-self:center;
    padding-top:0;
    max-width:360px;
  }

  .needs-journey{
    grid-column:1 / -1;
    grid-row:2;
    padding-top:4px;
  }

  .needs-route{
    top:13px;
    left:5%;
    width:90%;
  }

  .need-section-example2 .needs-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  .process-example2-layout{
    grid-template-columns:1fr;
    gap:25px;
  }

  .process-heading{
    max-width:440px;
  }

  .process-heading h2 br{
    display:none;
  }

  .process-section-example2 .process-grid{
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);
  }
}

/* Celular */
@media(max-width:620px){
  .need-section-example2{
    padding:28px 0 34px;
  }

  .need-example2-layout{
    grid-template-columns:116px minmax(0,1fr);
    gap:12px 18px;
  }

  .thinking-person{
    height:132px;
  }
  .need-heading .eyebrow{
    font-size:9px;
    letter-spacing:.15em;
  }

  .need-heading h2{
    font-size:26px;
  }

  .needs-journey{
    margin-top:4px;
  }

  .needs-route{
    display:none;
  }

  .need-section-example2 .needs-grid{
    grid-template-columns:1fr 1fr;
    gap:24px 10px;
  }

  .need-section-example2 .need-item{
    min-height:0;
    padding:0 4px;
  }

  .need-section-example2 .need-icon{
    width:62px;
    height:62px;
    margin-bottom:10px;
  }

  .need-section-example2 .need-symbol{
    width:46px;
    height:46px;
  }

  .need-section-example2 .need-item p{
    font-size:12px;
    max-width:145px;
  }

  .process-section-example2{
    padding:28px 0 32px;
  }

  .process-example2-layout{
    gap:24px;
  }

  .process-heading h2{
    font-size:28px;
  }

  .process-section-example2 .process-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .process-section-example2 .process-step{
    grid-template-columns:60px minmax(0,1fr);
    gap:12px;
    padding:6px 0;
  }

  .process-section-example2 .step-number{
    left:-2px;
    top:1px;
    font-size:13px;
  }

  .process-section-example2 .process-icon{
    width:54px;
    height:54px;
  }

  .process-section-example2 .process-arrow{
    width:54px;
    height:22px;
    display:grid;
    place-items:center;
    transform:rotate(90deg);
    font-size:21px;
    margin:-3px 0 -3px;
  }

  .process-section-example2 .process-step h3{
    font-size:14px;
  }

  .process-section-example2 .process-step p{
    font-size:11.5px;
  }
}

/* =========================================================
   HOME — MOBILE: composición original ajustada
   Letras más pequeñas, juntas y "Arte" abajo hacia la izquierda.
   ========================================================= */

@media(max-width:620px){

  .home-cover{
    position:relative;
    min-height:calc(100svh - var(--header-h));
    align-items:stretch;
    overflow:hidden;
  }

  .home-grid{
    position:relative;
    display:block;
    width:min(100% - 30px,1440px);
    min-height:calc(100svh - var(--header-h));
    padding:22px 0 28px;
  }

  .home-copy{
    position:relative;
    z-index:2;
    min-height:calc(100svh - var(--header-h) - 50px);
    padding:0;
    gap:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .home-lockup{
    position:relative;
    z-index:3;
    width:calc(100% + 74px);
    margin-left:-48px;
    min-height:215px;
    padding-top:30px;
  }

  .home-line-primary{
    position:relative;
    z-index:4;
    max-width:none;
    font-size:clamp(34px,10.3vw,46px);
    line-height:.84;
    letter-spacing:-.088em;
    white-space:nowrap;
  }

  .home-line-secondary{
    position:relative;
    z-index:4;
    max-width:none;
    margin-top:3px;
    font-size:clamp(23px,6.8vw,31px);
    line-height:.86;
    letter-spacing:-.078em;
    white-space:nowrap;
  }

  .home-script{
    z-index:4;
    left:13%;
    top:76px;
    font-size:clamp(78px,22.5vw,100px);
    line-height:.78;
    transform:rotate(-5deg);
  }

  .home-visual{
    position:absolute;
    z-index:1;
    top:40px;
    right:-62px;
    width:72%;
    max-width:none;
    height:320px;
    margin:0;
    display:block;
    overflow:visible;
    pointer-events:none;
  }

  .home-photo-frame{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    transform:none;
    overflow:hidden;
    border-radius:0;
    background:transparent;
  }

  .home-photo-frame img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    background:transparent;
  }

  .home-lower{
    position:relative;
    z-index:5;
    width:100%;
    padding:22px 0 0;
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,.92) 22px,
      #fff 56px
    );
  }

  .home-intro{
    max-width:100%;
    font-size:15px;
    line-height:1.5;
  }

  .home-actions{
    margin-top:20px;
    gap:9px;
    flex-direction:column;
    align-items:stretch;
  }

  .home-actions .btn{
    width:100%;
  }

  .home-location-text{
    margin-top:16px;
    font-size:13px;
  }
}

/* Ajuste extra para celulares angostos */
@media(max-width:420px){

  .home-lockup{
    width:calc(100% + 86px);
    margin-left:-56px;
    min-height:205px;
    padding-top:30px;
  }

  .home-line-primary{
    font-size:clamp(31px,9.8vw,40px);
    line-height:.84;
    letter-spacing:-.092em;
  }

  .home-line-secondary{
    margin-top:2px;
    font-size:clamp(21px,6.5vw,28px);
    line-height:.86;
    letter-spacing:-.082em;
  }

  .home-script{
    left:12%;
    top:72px;
    font-size:clamp(72px,21.5vw,92px);
  }

  .home-visual{
    top:42px;
    right:-66px;
    width:75%;
    height:305px;
  }
}

/* Ajuste extra para pantallas muy angostas */
@media(max-width:380px){

  .home-lockup{
    width:calc(100% + 94px);
    margin-left:-60px;
    min-height:198px;
  }

  .home-line-primary{
    font-size:clamp(29px,9.4vw,36px);
  }

  .home-line-secondary{
    font-size:clamp(20px,6.2vw,26px);
  }

  .home-script{
    left:11%;
    top:70px;
    font-size:clamp(68px,21vw,86px);
  }

  .home-visual{
    right:-70px;
    width:78%;
    height:292px;
  }
}

/* =========================================================
   HOME MOBILE — CONTROLES MANUALES DEL TEXTO
   Para mover a la derecha: aumenta el valor de translateX()
   Para mover a la izquierda: usa valores negativos
   ========================================================= */

@media (max-width: 620px){

  /* ------------------------------
     BLOQUE GENERAL DEL TÍTULO
     Mueve TODO junto:
     TU SONRISA + ES NUESTRO + Arte
     ------------------------------ */
  .home-lockup{
    width: calc(100% + 48px);
    margin-left: -24px;
  }


  /* ------------------------------
     TEXTO 1: "TU SONRISA"
     Más a la derecha:
     transform: translateX(10px);
     ------------------------------ */
  .home-line-primary{
    transform: translateX(14px);
  }


  /* ------------------------------
     TEXTO 2: "ES NUESTRO"
     Más a la derecha:
     transform: translateX(10px);
     ------------------------------ */
  .home-line-secondary{
    transform: translateX(14px);
  }


  /* ------------------------------
     TEXTO 3: "Arte"
     left  = izquierda / derecha
     top   = arriba / abajo

     Más a la derecha: sube left
     Más abajo: sube top
     ------------------------------ */
  .home-script{
    left: 18%;
    top: 88px;
  }
}



/* =========================================================
   HOME MOBILE PEQUEÑO — iPhone angosto / 430px o menos
   ========================================================= */

@media (max-width: 430px){

  /* ------------------------------
     BLOQUE GENERAL DEL TÍTULO
     ------------------------------ */
  .home-lockup{
    width: calc(100% + 56px);
    margin-left: -28px;
  }


  /* ------------------------------
     TEXTO 1: "TU SONRISA"
     ------------------------------ */
  .home-line-primary{
    transform: translateX(15px);
  }


  /* ------------------------------
     TEXTO 2: "ES NUESTRO"
     ------------------------------ */
  .home-line-secondary{
    transform: translateX(18px);
    top: 10px;
  }


  /* ------------------------------
     TEXTO 3: "Arte"
     ------------------------------ */
  .home-script{
    left: 18%;
    top: 130px;
    margin-left: -38px;
  }
}