/* =========================================================================
   DERMOLISS — hoja de estilos
   Tokens y medidas tomados del kit de Elementor 1076 y del _elementor_data
   ========================================================================= */

:root{
  --lavanda:      #BAC7F6;
  --lavanda-mid:  #9EADE4;
  --azul:         #6F7AA2;
  --rosa:         #F8AAB0;
  --hueso:        #F6F7FF;
  --texto:        #303030;
  --blanco:       #FFFFFF;
  --hairline:     #0000001A;
  --wa:           #25D366;

  --grad-24: linear-gradient(140deg, var(--lavanda) 24%, var(--rosa) 100%);
  --grad-34: linear-gradient(140deg, var(--lavanda) 34%, var(--rosa) 100%);

  --display: "Philosopher", Georgia, serif;
  --script:  "Cookie", "Brush Script MT", cursive;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1140px;
  --gut: 20px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanco);color:var(--texto);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.2}
h5{margin:0;font-family:var(--script);font-weight:400;font-size:34px;line-height:1.2}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--gut)}

.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;
     stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico--relleno{fill:currentColor;stroke:none}

/* ---------- Botón ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;flex-direction:row-reverse;
  background:var(--rosa);color:var(--blanco);
  font-family:var(--body);font-size:20px;font-weight:500;line-height:1.2;
  padding:14px 30px;border:0;border-radius:30px;cursor:pointer;text-align:center;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:var(--azul);transform:translateY(-3px);
           box-shadow:0 14px 28px -14px rgba(111,122,162,.6)}
.btn .ico{width:17px;height:17px;stroke-width:1.8}

/* =========================================================================
   BARRA SUPERIOR
   ========================================================================= */
.barra-top{background-image:var(--grad-24);color:var(--blanco);padding:5px 0;font-size:14px}
.barra-top .contenedor{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.barra-top__nombre{display:inline-flex;align-items:center;gap:8px}
.barra-top__der{display:flex;align-items:center;gap:14px}
.barra-top__red,.barra-top__tel{display:inline-flex;align-items:center;gap:6px;transition:opacity .25s}
.barra-top__red:hover,.barra-top__tel:hover{opacity:.72}
.barra-top .ico{width:15px;height:15px}

/* =========================================================================
   CABECERA
   ========================================================================= */
.cabecera{
  position:sticky;top:0;z-index:60;background:var(--blanco);
  box-shadow:0 0 5px 0 rgba(0,0,0,.2);padding:5px 0;
  transition:padding .3s var(--ease),box-shadow .3s var(--ease);
}
.cabecera.compacta{padding:0;box-shadow:0 4px 16px -6px rgba(0,0,0,.22)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca img{width:200px;transition:width .3s var(--ease)}
.cabecera.compacta .marca img{width:170px}

.nav{display:flex;align-items:center;gap:45px}
.nav__enlace{
  position:relative;font-family:var(--body);font-size:16px;font-weight:500;
  text-transform:uppercase;color:var(--texto);padding:12px 0;transition:color .25s;
}
.nav__enlace::after{
  content:"";position:absolute;left:0;bottom:6px;height:2px;width:100%;
  background:var(--rosa);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__enlace:hover{color:var(--rosa)}
.nav__enlace:hover::after{transform:scaleX(1)}

.hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.hamburguesa i{display:block;width:26px;height:2px;background:var(--texto);margin:6px 0;
               border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.hamburguesa[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================================
   HERO — sección a ancho completo, 50/50
   ========================================================================= */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}

/* La primera foto queda de base: si las animaciones no corren, el hero igual se ve */
.hero__media{
  position:relative;overflow:hidden;min-height:420px;
  background-color:var(--lavanda);
  background-image:url("../img/hero-1.jpg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero__slide{
  position:absolute;inset:0;background-size:cover;background-position:center center;
  opacity:0;will-change:transform,opacity;
  animation:slideshow 21s var(--ease) infinite;
}
.hero__slide--1{background-image:url("../img/hero-1.jpg")}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero__slide--1{background-image:image-set(url("../img/hero-1.webp") type("image/webp"),url("../img/hero-1.jpg") type("image/jpeg"))}
}
.hero__slide--2{background-image:url("../img/hero-2.jpg")}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero__slide--2{background-image:image-set(url("../img/hero-2.webp") type("image/webp"),url("../img/hero-2.jpg") type("image/jpeg"))}
}
.hero__slide--3{background-image:url("../img/hero-3.jpg")}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero__slide--3{background-image:image-set(url("../img/hero-3.webp") type("image/webp"),url("../img/hero-3.jpg") type("image/jpeg"))}
}
.hero__slide:nth-child(1){animation-delay:0s}
.hero__slide:nth-child(2){animation-delay:7s}
.hero__slide:nth-child(3){animation-delay:14s}
@keyframes slideshow{
  0%   {opacity:0;transform:scale(1.06) translateX(6%)}
  4%   {opacity:1}
  33.3%{opacity:1;transform:scale(1.14) translateX(-3%)}
  38%  {opacity:0;transform:scale(1.15) translateX(-5%)}
  100% {opacity:0;transform:scale(1.15) translateX(-5%)}
}

.hero__texto{
  position:relative;background:var(--hueso);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:7em 2em 6em;
}
.hero__texto::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/textura.jpg");
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  opacity:.08;mix-blend-mode:multiply;
}
.hero__inner{position:relative;max-width:620px}
.hero__nombre{font-size:50px;color:#000;letter-spacing:.9px;margin-bottom:2px}
.hero__titulo{font-size:51px;color:var(--azul);margin-bottom:20px}
.hero__desc{font-family:var(--body);font-size:20px;color:var(--texto);margin-bottom:28px}

.sube{opacity:0;transform:translateY(24px);animation:sube .9s var(--ease) forwards}
.sube-1{animation-delay:.05s}.sube-2{animation-delay:.2s}
.sube-3{animation-delay:.35s}.sube-4{animation-delay:.5s}
@keyframes sube{to{opacity:1;transform:none}}

/* =========================================================================
   PILARES — icon-box con icono a la izquierda
   ========================================================================= */
.pilares{position:relative;background:var(--blanco);padding:2em 0 3em}
.pilares__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pilar{display:flex;gap:15px;align-items:flex-start}
.pilar__icono{color:var(--rosa);flex:0 0 auto;line-height:0;
              transition:transform .45s var(--ease)}
.pilar__icono .ico{width:50px;height:50px;stroke-width:1.1}
.pilar:hover .pilar__icono{transform:translateY(-4px) scale(1.06)}
.pilar h3{font-size:20px;color:var(--azul);margin-bottom:5px;line-height:1.3}
.pilar p{font-family:var(--body);font-size:16px;margin:0}

/* Shape divider "arrow" (negativo) — el mismo del original */
.flecha{position:absolute;left:0;right:0;bottom:-1px;line-height:0;overflow:hidden;pointer-events:none}
.flecha svg{display:block;width:100%;height:20px;transform:rotate(180deg)}
.flecha--hueso svg path{fill:var(--hueso)}
.flecha--blanco svg path{fill:var(--blanco)}

/* =========================================================================
   SOBRE MÍ — columnas 40 / 60
   ========================================================================= */
.sobre{position:relative;background:var(--hueso);padding:4em 0}
.sobre__grid{display:grid;grid-template-columns:40% 60%;gap:0;align-items:center}
.sobre__media{display:flex;flex-direction:column;align-items:flex-end;padding-right:20px}
.sobre__media img{width:90%;border-radius:50px 0 50px 0}
.contador{
  width:213px;max-width:50%;margin:-100px 0 0;position:relative;z-index:2;
  background:var(--blanco);border-radius:20px;padding:20px 0;text-align:center;
  box-shadow:0 18px 40px -26px rgba(111,122,162,.55);
}
.contador__num{font-family:var(--body);font-size:55px;font-weight:400;
               color:var(--azul);line-height:1.05}
.contador__titulo{font-family:var(--body);font-size:16px;font-weight:600;
                  text-transform:uppercase;color:var(--texto);line-height:1.4}

.sobre__texto{padding-left:10px}
.antetitulo{color:var(--rosa);letter-spacing:.9px;margin-bottom:2px}
.sobre__texto h2{font-size:40px;color:var(--azul);margin-bottom:14px}
.sobre__texto p{font-family:var(--body);font-size:17px;margin-bottom:.7em}
.sobre__texto strong{font-weight:600}
.formacion{display:grid;gap:7px;margin-top:10px}
.formacion li{display:flex;gap:10px;font-family:var(--body);font-size:16px;
              align-items:flex-start;line-height:1.5}
.formacion li .ico{width:14px;height:14px;margin-top:.4em;color:var(--rosa);transition:color .3s}
.formacion li:hover .ico{color:var(--azul)}

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee{background-image:var(--grad-24);display:flex;overflow:hidden;
         gap:2rem;padding:1rem 0;user-select:none}
.marquee__grupo{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;min-width:100%;animation:scroll 15s linear infinite reverse;
}
.marquee:hover .marquee__grupo{animation-play-state:paused}
.marquee__grupo span{color:var(--blanco);font-family:var(--body);font-size:1rem;
                     font-weight:600;white-space:nowrap}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 2rem))}}
@media only screen and (min-width:360px){.marquee__grupo span{font-size:2rem}}

/* =========================================================================
   LISTADOS — tratamientos / aparatología
   ========================================================================= */
.listado{padding:70px 30px}
.listado--tratamientos{background-image:linear-gradient(270deg,var(--hueso) 54%,var(--blanco) 54%)}
.listado--aparatologia{background-image:linear-gradient(270deg,var(--blanco) 48%,var(--hueso) 48%)}
.listado__grid{max-width:var(--ancho);margin:0 auto;
               display:grid;grid-template-columns:1fr 1fr;align-items:center}
.listado--tratamientos .listado__intro{padding-right:100px}
.listado--aparatologia .listado__intro{padding-left:100px;text-align:right;order:2}
.listado--aparatologia .listado__items{order:1}
.listado__items{padding:0 20px}

.listado__intro h2{font-size:65px;color:var(--azul);line-height:1.05;margin-bottom:14px}
.listado__intro p{font-family:var(--body);font-size:17px;text-align:justify;margin-bottom:22px}
.listado--aparatologia .listado__intro p{text-align:right}

.item{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--hairline);
      transition:transform .4s var(--ease)}
.item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.item:hover{transform:translateX(6px)}
.item h3{font-size:29px;color:var(--azul);margin-bottom:6px;transition:color .3s}
.item:hover h3{color:var(--rosa)}
.item p{font-family:var(--body);font-size:17px;margin:0}
.item em{font-style:italic}

/* =========================================================================
   BANDA CTA — panel interior redondeado con velo blanco al 25 %
   ========================================================================= */
.cta{background-image:var(--grad-34);padding:4em 0}
.cta__panel{
  max-width:var(--ancho);margin:0 auto;
  background:rgba(255,255,255,.25);border-radius:30px;
  padding:3em;text-align:center;color:var(--blanco);
}
.cta__panel h2{font-size:50px;color:var(--blanco);margin-bottom:8px;line-height:1.15}
.cta__panel p{font-family:var(--body);font-size:18px;color:rgba(255,255,255,.92);
              margin:0 auto 22px;max-width:56ch}
.cta__panel .btn:hover{background:var(--blanco);color:var(--azul);
                       box-shadow:0 14px 28px -14px rgba(0,0,0,.35)}

/* =========================================================================
   CONTACTO
   ========================================================================= */
.contacto{padding:5em 0}
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.contacto__info{padding-right:20px}
.contacto__info h2{font-size:30px;color:var(--azul);margin-bottom:14px}
.contacto__intro{font-family:var(--body);font-size:17px;margin-bottom:22px}

.datos{display:grid;gap:20px}
.dato{display:flex;align-items:center;gap:15px}
.dato__ico{color:var(--rosa);flex:0 0 auto;line-height:0;
           transition:transform .4s var(--ease)}
.dato__ico .ico{width:33px;height:33px;stroke-width:1.3}
.dato:hover .dato__ico{transform:translateY(-3px) scale(1.08)}
.dato h3{font-size:20px;color:var(--azul);line-height:1.3;font-weight:700}
.dato p{font-family:var(--body);font-size:17px;margin:0}
.dato a:hover{color:var(--rosa)}

.separador{display:flex;align-items:center;gap:14px;margin:26px 0 14px;
           font-family:var(--body);font-size:16px;color:var(--texto)}
.separador::after{content:"";flex:1;height:1px;background:var(--hairline)}
.redes{display:flex;gap:5px}
.redes a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--rosa);color:var(--blanco);
  transition:transform .3s var(--ease),background .3s var(--ease)}
.redes a:hover{background:var(--azul);transform:translateY(-3px)}
.redes .ico{width:17px;height:17px}

/* Tarjeta del formulario */
.form{
  background:var(--blanco);border-radius:20px;padding:2.6em 2em;
  box-shadow:0 10px 40px -18px rgba(48,48,48,.28);
  display:grid;gap:22px;
}
.campo{position:relative}
.campo input,.campo textarea{
  width:100%;background:var(--blanco);color:#000;
  border:0;border-bottom:1px solid var(--texto);border-radius:0;
  font-family:var(--body);font-size:17px;padding:12px 2px;
  transition:border-color .3s var(--ease);
}
.campo textarea{resize:vertical;min-height:120px}
.campo label{position:absolute;left:2px;top:12px;color:var(--texto);font-size:17px;
  font-family:var(--body);pointer-events:none;transform-origin:left top;
  transition:transform .28s var(--ease),font-size .28s var(--ease),color .28s var(--ease)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--rosa)}
.campo input:focus+label,.campo textarea:focus+label,
.campo input:not(:placeholder-shown)+label,.campo textarea:not(:placeholder-shown)+label{
  transform:translateY(-22px);font-size:13px;letter-spacing:.06em;color:var(--azul)}
.form .btn{width:100%;justify-content:center;border-radius:20px;
           font-weight:700;text-transform:capitalize}
.form__aviso{font-family:var(--body);font-size:14px;color:var(--azul);margin:0;text-align:center}
.form__estado{font-family:var(--body);font-size:15px;margin:0;text-align:center;min-height:0}
.form__estado:empty{display:none}
.form__estado--error{color:#B3261E}
.form .btn[disabled]{opacity:.65;pointer-events:none}
.campo input:user-invalid,.campo textarea:user-invalid{border-bottom-color:#B3261E}

/* =========================================================================
   MAPA
   ========================================================================= */
.mapa{position:relative;line-height:0}
/* el desaturado va sobre el iframe, no sobre el respaldo */
.mapa iframe{width:100%;height:400px;border:0;display:block;
             filter:saturate(0);transition:filter .6s var(--ease)}
.mapa:hover iframe,.mapa:focus-within iframe{filter:saturate(1)}
.mapa__respaldo{
  min-height:400px;background:var(--hueso);line-height:1.7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:40px 20px;text-align:center;
}
.mapa__respaldo > .ico{width:40px;height:40px;color:var(--rosa);stroke-width:1.3;margin-bottom:6px}
.mapa__titulo{font-family:var(--display);font-weight:700;font-size:24px;color:var(--azul);margin:0}
.mapa__dir{font-family:var(--body);font-size:17px;margin:0}
.mapa__nota{font-family:var(--body);font-size:14px;color:var(--azul);margin:0;max-width:46ch}
.mapa__ir--est{position:static;margin-top:14px}
.mapa__ir{
  position:absolute;right:20px;bottom:20px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blanco);color:var(--azul);
  font-family:var(--body);font-size:15px;font-weight:500;line-height:1;
  padding:12px 18px;border-radius:30px;
  box-shadow:0 6px 20px -8px rgba(48,48,48,.45);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.mapa__ir:hover{background:var(--rosa);color:var(--blanco);transform:translateY(-2px)}
.mapa__ir .ico{width:16px;height:16px}

/* =========================================================================
   PIE
   ========================================================================= */
.pie{background:var(--hueso);padding:50px 0 0}
.pie__grid{display:grid;gap:14px;justify-items:center;text-align:center;
           max-width:700px;margin:0 auto}
.pie img{width:38%;max-width:260px}
.pie p{font-family:var(--body);font-size:16px;margin:0}
.pie__linea{height:1px;background:var(--hairline);width:100%}
.pie__firma{font-family:var(--body);font-size:20px;color:var(--texto)}
.pie .redes a{background:transparent;color:var(--rosa);
              border:1px solid rgba(248,170,176,.55)}
.pie .redes a:hover{background:var(--rosa);color:var(--blanco);border-color:var(--rosa)}
.pie__abajo{background-image:var(--grad-24);color:var(--blanco);margin-top:36px;padding:6px 0}
.pie__abajo .contenedor{display:flex;justify-content:center;text-align:center;gap:14px;flex-wrap:wrap;
                        font-family:var(--body);font-size:14px}

/* =========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================= */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:pulso 2.6s var(--ease) infinite;
}
.wa:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.34)}
.wa svg{width:30px;height:30px;fill:#fff}
@keyframes pulso{
  0%  {transform:scale(1);opacity:.65}
  70% {transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

/* =========================================================================
   PÁGINA GRACIAS
   ========================================================================= */
.gracias{position:relative;background:var(--hueso);text-align:center;padding:90px 0 100px;overflow:hidden}
.gracias::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("../img/textura.jpg");
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  opacity:.08;mix-blend-mode:multiply;
}
.gracias .contenedor{position:relative;max-width:860px}
.gracias__ante{color:var(--rosa);letter-spacing:.9px;margin-bottom:2px}
.gracias__titulo{font-size:51px;color:var(--azul);margin-bottom:16px}
.gracias__texto{font-family:var(--body);font-size:20px;color:var(--texto);margin-bottom:26px}
.gracias .btn{flex-direction:row}

@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  .hero__texto::before,.gracias::before{background-image:image-set(url("../img/textura.webp") type("image/webp"),url("../img/textura.jpg") type("image/jpeg"))}
}

/* =========================================================================
   ANIMACIONES AL SCROLL  (fadeInLeft / fadeInRight / fadeInUp)
   ========================================================================= */
.anim{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim--izq{transform:translateX(-60px)}
.anim--der{transform:translateX(60px)}
.anim--arriba{transform:translateY(40px)}
.anim.visible{opacity:1;transform:none}
.anim[data-delay="1"]{transition-delay:.15s}
.anim[data-delay="2"]{transition-delay:.3s}
.anim[data-delay="3"]{transition-delay:.45s}

/* =========================================================================
   RESPONSIVE — 1024 / 767
   ========================================================================= */
@media (max-width:1024px){
  /* El hero se apila y, como en el original, el texto va primero */
  .hero{grid-template-columns:1fr}
  .hero__media{order:2;min-height:0;padding-bottom:50%}
  .hero__texto{order:1;padding:2em}
  .hero__inner{max-width:none}
  .hero__nombre{font-size:44px}
  .hero__titulo{font-size:44px}
  .hero__desc{font-size:19px}

  .pilares{padding:2em 2em 3em}
  .pilares__grid{grid-template-columns:1fr;gap:26px}

  .sobre{padding:2em 0 4em}
  .sobre__grid{grid-template-columns:1fr;gap:26px}
  .sobre__media{align-items:center;padding-right:0;max-width:460px;margin:0 auto}
  .sobre__media img{width:100%}
  .contador{margin:-100px auto 0;max-width:213px}
  .contador__num{font-size:40px}
  .contador__titulo{font-size:15px}
  .sobre__texto{padding-left:0;text-align:center}
  .sobre__texto h2{font-size:24px}
  .sobre__texto p{text-align:justify}
  .antetitulo{font-size:30px}

  .listado{background-image:none!important;padding:40px 30px}
  .listado--tratamientos{background:var(--blanco)}
  .listado--aparatologia{background:var(--hueso)}
  .listado__grid{grid-template-columns:1fr}
  .listado__intro{text-align:center;padding:0 20px!important;margin-bottom:24px}
  .listado--aparatologia .listado__intro{order:0;text-align:center}
  .listado--aparatologia .listado__items{order:0}
  .listado__intro h2{font-size:47px}
  .listado__intro p,.listado--aparatologia .listado__intro p{text-align:justify}
  .listado__intro .btn{margin:0 auto}
  .item h3{font-size:20px}
  .item{padding-bottom:14px;margin-bottom:14px}

  .cta{padding:1em}
  .cta__panel{padding:2em;border-radius:20px}
  .cta__panel h2{font-size:34px}

  .contacto{padding:3em 0}
  .contacto__grid{grid-template-columns:1fr;gap:34px}
  .contacto__info{padding-right:0;text-align:center}
  .contacto__info h2{font-size:29px}
  .contacto__intro{text-align:justify}
  .dato{text-align:left}
  .datos{max-width:420px;margin:0 auto}
  .separador{max-width:420px;margin-inline:auto}
  .redes{justify-content:center}

  .gracias{padding:60px 0 70px}
  .gracias__ante{font-size:30px}

  .mapa iframe,.mapa__respaldo{height:305px;min-height:305px}
  .pie img{width:55%}
  .nav{gap:28px}
  .marca img{width:170px}
}

@media (max-width:767px){
  body{font-size:16px}
  .hero__texto{padding:3em 1em}
  .hero__nombre{font-size:24px}
  .hero__titulo{font-size:29px}
  .hero__desc{font-size:18px;text-align:justify}
  .barra-top__nombre{display:none}
  .barra-top .contenedor{justify-content:center}
  .marca img{width:150px}
  .pilares{padding:3em 0}
  .listado{padding:60px 20px}
  .cta{padding:2.5em 0}
  .cta__panel h2{font-size:30px}
  .antetitulo,.gracias__ante{font-size:26px}
  .gracias__titulo{font-size:40px}
  .gracias__texto{font-size:18px}
  .sobre__texto h2{font-size:22px}
  .mapa iframe,.mapa__respaldo{height:330px;min-height:330px}
  .mapa__titulo{font-size:20px}
  .mapa__ir{right:12px;bottom:12px;padding:10px 15px;font-size:14px}
  .pie img{width:65%}
  .pie__abajo .contenedor{justify-content:center;text-align:center}
  .wa{right:14px;bottom:14px;width:50px;height:50px}
  .wa svg{width:27px;height:27px}

  .hamburguesa{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--lavanda-mid);padding:6px 20px 18px;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.35);
  }
  .nav.abierta{display:flex;animation:sube .35s var(--ease) forwards}
  .nav__enlace{color:var(--blanco);padding:13px 0;font-size:16px;
               border-bottom:1px solid #FFFFFF3D}
  .nav__enlace:hover{color:var(--blanco)}
  .nav__enlace::after{background:var(--blanco);bottom:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .anim,.sube{opacity:1!important;transform:none!important}
  .hero__slide{display:none}
}