/* ==========================================
   VARIABLES
========================================== */

:root {
  --background: #eadccd;
  --paper: #f3e8dd;

  --text: #2d2e2f;

  --orange: #c86e4c;
  --yellow: #e3b24e;

  --font-body: "DM Sans", sans-serif;
  --font-serif: "Cormorant Garamond", serif;
}


/* ==========================================
   RESET
========================================== */

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


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  color: var(--text);
  background: var(--background);

  font-family: var(--font-body);
  font-weight: 400;

  overflow-x: hidden;
}


body.menu-open {
  overflow: hidden;
}


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


a {
  color: inherit;
  text-decoration: none;
}


button {
  color: inherit;
  font: inherit;
}


/* ==========================================
   PÁGINA
========================================== */

.page {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  background: var(--background);
}


/* ==========================================
   HERO
========================================== */

.hero {
  position: relative;

  width: 100%;

  /*
    Proporciones pensadas para aproximarse
    al diseño vertical de la referencia.
  */
  height: clamp(760px, 133vw, 1250px);

  overflow: hidden;

  background: #e7d7c7;
}


/* ==========================================
   FOTO PRINCIPAL
========================================== */

.hero__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
    Este es uno de los valores que seguramente
    querrás modificar dependiendo de tu foto.
  */
  object-position: center center;

  filter:
    saturate(0.9)
    brightness(1.04)
    contrast(0.96);
}


/* Capa para darle el tono cálido del diseño */

.hero__overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(246, 231, 215, 0.10) 0%,
      rgba(232, 211, 190, 0.03) 55%,
      rgba(216, 184, 154, 0.05) 100%
    );
}


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

.header {
  position: absolute;
  z-index: 20;

  top: clamp(36px, 6vw, 62px);
  left: clamp(30px, 6.5vw, 64px);
  right: clamp(30px, 6.5vw, 64px);

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}


/* ==========================================
   LOGO
========================================== */

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.brand__logo-link {
  display: block;

  line-height: 0;
}


.brand__logo {
  /*
    Ajusta este ancho si tu PNG tiene
    mucho espacio transparente alrededor.
  */
  width: clamp(195px, 27vw, 275px);

  height: auto;

  object-fit: contain;
}




/* ==========================================
   BOTÓN HAMBURGUESA
========================================== */

.menu-button {
  width: clamp(34px, 4.5vw, 42px);

  margin: 0px 0 0;
  padding: 6px 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  display: flex;
  flex-direction: column;

  gap: clamp(6px, 0.8vw, 8px);
}


.menu-button span {
  display: block;

  width: 100%;
  height: 2px;

  border-radius: 999px;

  background: #303132;

  transform-origin: center;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


/* Transformamos la hamburguesa
   cuando el menú está abierto */

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


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


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


/* ==========================================
   INTRO
========================================== */

.intro {
  position: relative;

  /*
    Seguimos subiendo esta sección sobre la foto,
    pero ahora la curva la dibuja el SVG.
  */
  margin-top: clamp(-170px, -17vw, -90px);

  min-height: 0;

  background: transparent;

  /*
    Nos permite controlar correctamente qué forma
    queda delante y cuál detrás.
  */
  isolation: isolate;
}


/* Fondo crema que continúa después de la curva */

.intro::before {
  content: "";

  position: absolute;
  z-index: 2;

  left: 0;
  right: 0;
  top: 390px;
  bottom: 0;

  background: var(--paper);
}


/* ==========================================
   CURVA ORGÁNICA
========================================== */

.intro__wave {
  position: absolute;
  z-index: 2;

  top: -100px;
  left: 0;

  width: 100%;
  height: 500px;

  pointer-events: none;
}

.intro__wave path {
  fill: var(--paper);
}


/* ==========================================
   CÍRCULO AMARILLO
========================================== */

.intro__circle {
  position: absolute;
  z-index: 1;

  /*
    Al estar detrás del SVG, la forma crema
    "muerde" el círculo como en la referencia.
  */
  top: -55px;

  right: clamp(-250px, -27vw, -180px);

  width: clamp(380px, 53vw, 500px);

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 32%,
      #f3c74f 0%,
      #eab436 52%,
      #dba020 100%
    );
}


/* ==========================================
   CONTENIDO
========================================== */

.intro__card {
  position: relative;
  z-index: 3;

  width: 100%;

  min-height: 0;

  padding:
    clamp(70px, 8vw, 90px)
    clamp(36px, 7vw, 68px)
    clamp(70px, 8vw, 95px);

  /*
    Ya no queremos una tarjeta rectangular.
    El fondo lo crea la forma orgánica.
  */
  background: transparent;

  border-radius: 0;
}




/* ==========================================
   TITULAR
========================================== */

.intro__title {
  max-width: 650px;

  margin: 0;

  color: var(--orange);

  font-family: "Lora", serif;


  font-size: clamp(45px, 6.9vw, 69px);

  font-weight: 200;

  line-height: 1.20;

  letter-spacing: -0.002em;
}

.intro__headline {
  display: flex;
  align-items: center;

  gap: clamp(22px, 4vw, 42px);
}


.intro__illustration {
  flex: 0 0 auto;

  width: clamp(75px, 11vw, 115px);
  height: auto;

  object-fit: contain;

  transform: translateY(-4px);
}


/* ==========================================
   TEXTO
========================================== */

.intro__text {
  margin:
    clamp(33px, 4.3vw, 46px)
    0
    0;

  color: #333435;

  font-size: clamp(21px, 3.15vw, 31px);

  line-height: 1.52;

  letter-spacing: -0.035em;
}


/* ==========================================
   CTA "PIDE CITA"
========================================== */

.appointment-link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: clamp(195px, 24vw, 235px);

  margin-top: clamp(38px, 4.8vw, 55px);

  padding-bottom: clamp(12px, 1.7vw, 17px);

  border-bottom: 1.5px solid var(--orange);

  color: var(--orange);

  font-size: clamp(23px, 3.15vw, 31px);

  line-height: 1;

  transition:
    width 0.25s ease,
    opacity 0.25s ease;
}


.appointment-link__arrow {
  display: inline-block;

  font-size: 1.1em;
  font-weight: 300;

  line-height: 0;

  transform: translateY(-2px);

  transition: transform 0.25s ease;
}



.appointment-link:hover .appointment-link__arrow {
  transform:
    translate(8px, -2px);
}


/* ==========================================
   QUÉ ES NENES
========================================== */

.about {
  position: relative;

  padding:
    clamp(55px, 7vw, 80px)
    clamp(28px, 7vw, 70px)
    clamp(80px, 11vw, 120px);

  overflow: hidden;

  background: var(--paper);
}


/* Formas suaves de fondo */

.about::before,
.about::after {
  content: "";

  position: absolute;

  pointer-events: none;

  background: rgba(224, 203, 176, 0.20);

  border-radius: 50%;
}


.about::before {
  width: 220px;
  height: 360px;

  left: -130px;
  bottom: 30px;

  transform: rotate(12deg);
}


.about::after {
  width: 190px;
  height: 300px;

  right: -125px;
  bottom: 80px;

  transform: rotate(-15deg);
}


/* Contenedor */

.about__inner {
  position: relative;
  z-index: 2;

  width: min(100%, 720px);

  margin: 0 auto;
}


/* Título */

.about__header {
  text-align: center;
}


.about__title {
  margin: 0;

  color: #46423f;

  font-family: "Lora", serif;

  font-size: clamp(34px, 5vw, 50px);
  font-weight: 500;

  line-height: 1.1;
}


.about__dot {
  display: block;

  width: 9px;
  height: 9px;

  margin:
    clamp(20px, 3vw, 28px)
    auto
    0;

  border-radius: 50%;

  background: var(--orange);
}


/* Texto */

.about__text {
  max-width: 470px;

  margin:
    clamp(34px, 5vw, 48px)
    auto
    0;

  text-align: center;

  color: #404040;

  font-size: clamp(16px, 2.2vw, 20px);

  line-height: 1.65;
}


.about__text p {
  margin: 0;
}


.about__text p + p {
  margin-top: 28px;
}


/* ==========================================
   CARRUSEL DE TARJETAS
========================================== */

.about__feature {
  position: relative;

  width: min(100%, 520px);

  margin:
    clamp(35px, 6vw, 55px)
    auto
    0;
}


/* Pajarito */

.about__bird {
  position: relative;
  z-index: 3;

  width: clamp(100px, 17vw, 145px);
  height: auto;

  margin:
    0
    auto
    -34px;

  object-fit: contain;

  transform: translateY(-18px);
}


/* Ventana del carrusel */

.about__carousel {
  position: relative;
  z-index: 1;

  width: 100%;

  overflow: hidden;

  border-radius:
    clamp(30px, 5vw, 48px);

  touch-action: pan-y;
}


/* Carril con las tres tarjetas */

.about__track {
  display: flex;

  width: 100%;

  transition:
    transform
    0.45s
    cubic-bezier(0.76, 0, 0.24, 1);

  will-change: transform;
}


/* Tarjetas */

.about__card {
  position: relative;

  flex: 0 0 100%;

  min-width: 100%;

  padding:
    clamp(62px, 8vw, 80px)
    clamp(32px, 7vw, 58px)
    clamp(38px, 6vw, 55px);

  border-radius:
    clamp(30px, 5vw, 48px);

  color: #ffffff;

  background: var(--yellow);

  text-align: center;
}




.about__card-title {
  margin: 0;

  font-family: var(--font-body);

  font-size: clamp(18px, 2.5vw, 22px);

  font-weight: 400;
}


.about__card-text {
  max-width: 350px;

  margin:
    clamp(26px, 4vw, 34px)
    auto
    0;

  font-size: clamp(15px, 2.1vw, 18px);

  line-height: 1.7;
}


/* Adorno inferior */

.about__ornament {
  position: relative;

  width: 24px;
  height: 10px;

  margin:
    22px
    auto
    0;
}


.about__ornament::before,
.about__ornament::after {
  content: "";

  position: absolute;

  top: 3px;

  width: 10px;
  height: 6px;

  border-top:
    1px
    solid
    rgba(255, 255, 255, 0.8);
}


.about__ornament::before {
  left: 1px;

  transform: rotate(-25deg);
}


.about__ornament::after {
  right: 1px;

  transform: rotate(25deg);
}


/* Puntos del carrusel */

.about__pagination {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 13px;

  margin-top: 38px;
}


.about__pagination-dot {
  display: block;

  width: 13px;
  height: 13px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #ded2c4;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.about__pagination-dot--active {
  background: var(--orange);

  transform: scale(1.08);
}


/* ==========================================
   SECCIÓN DE CONTACTO
========================================== */

.contact {
  padding:
    clamp(90px, 12vw, 150px)
    clamp(30px, 7vw, 80px);

  background: #dfb150;
}


.contact__inner {
  max-width: 700px;
}


.contact__eyebrow {
  margin: 0 0 20px;

  font-size: 18px;

  letter-spacing: 0.02em;
}


.contact__title {
  margin: 0;

  font-family: var(--font-serif);

  font-size: clamp(60px, 9vw, 100px);

  font-weight: 500;

  line-height: 0.95;
}


.contact__text {
  max-width: 560px;

  margin: 30px 0 0;

  font-size: clamp(20px, 2.5vw, 26px);

  line-height: 1.5;
}


.contact__button {
  display: inline-flex;

  margin-top: 40px;

  padding:
    15px
    28px;

  border: 1px solid var(--text);

  font-size: 18px;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}


.contact__button:hover {
  color: var(--paper);
  background: var(--text);
}


/* ==========================================
   FONDO DEL MENÚ
========================================== */

.menu-backdrop {
  display: none;
}


/* ==========================================
   MENÚ LATERAL
========================================== */

.menu {
  position: fixed;
  z-index: 100;

  inset: 0;

  width: 100%;
  height: 100dvh;

  padding:
    24px
    22px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 45% 35%,
      #f1cc5d 0%,
      #e7bc45 45%,
      #dba932 100%
    );

  transform: translateX(100%);

  transition:
    transform
    0.45s
    cubic-bezier(0.76, 0, 0.24, 1);
}


body.menu-open .menu {
  transform: translateX(0);
}


/* Formas decorativas verdes */

.menu::before,
.menu::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.menu::before {
  width: 150px;
  height: 150px;

  right: -75px;
  bottom: -25px;

  background: #b7bea0;
}


.menu::after {
  width: 85px;
  height: 85px;

  right: 35px;
  bottom: -38px;

  background: #aeb895;
}


/* ==========================================
   BOTÓN CERRAR
========================================== */

.menu__close {
  position: absolute;
  z-index: 3;

  top: 24px;
  right: 24px;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;

  background: transparent;

  color: transparent;

  font-size: 0;

  cursor: pointer;
}


.menu__close::before,
.menu__close::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 22px;
  height: 1px;

  background: #ffffff;

  transform-origin: center;
}


.menu__close::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.menu__close::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


/* ==========================================
   CONTENIDO DEL MENÚ
========================================== */

.menu__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  height: 100%;

  padding-top: 62px;
}


/* ==========================================
   LINKS DEL MENÚ
========================================== */

.menu__links {
  display: flex;
  flex-direction: column;

  gap: 27px;

  margin: 0;

  padding: 0;

  list-style: none;
}


.menu__links a {
  display: inline-block;

  color: #ffffff;

  font-family: var(--font-body);

  font-size: 17px;

  font-weight: 400;

  line-height: 1.25;

  letter-spacing: -0.02em;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


.menu__links a:hover {
  opacity: 0.7;

  transform: translateX(4px);
}


.menu__links a.menu__link--active {
  font-weight: 500;
}


.menu__links a::after {
  display: none;
}


/* ==========================================
   ESCRITORIO
========================================== */

@media (min-width: 1100px) {

  .hero {
    height: min(1050px, 100svh);

    min-height: 820px;
  }


  .brand__logo {
    width: 260px;
  }


.intro {
  margin-top: -130px;
}


.intro__card {
  width: 100%;
}


.intro__circle {
  top: -60px;

  width: min(520px, 42vw);

  right: -220px;
}

}


/* ==========================================
   MÓVIL
========================================== */

@media (max-width: 560px) {

  .hero {
    height: 720px;
  }


  .header {
    top: 30px;
    left: 24px;
    right: 24px;
  }


  /* Logo */

  .brand__logo {
    width: 140px;
  }


  


  /* Hamburguesa */

  .menu-button {
    width: 32px;

    gap: 6px;
  }


  .menu-button span {
    height: 2px;
  }


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


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


  /* Intro */

  .intro {
  margin-top: -75px;

  min-height: 0;
}

.intro__headline {
  display: grid;
  grid-template-columns: 62px 1fr;

  align-items: center;

  gap: 16px;
}


.intro__illustration {
  width: 58px;

  justify-self: center;
}


.intro__title {
  margin: 0;
}


.intro::before {
  top: 280px;
}


.intro__wave {
  top: -70px;

  height: 360px;
}


.intro__card {
  width: 100%;

  min-height: 0;

  padding:
    50px
    28px
    70px;

  border-radius: 0;
}


.intro__circle {
  top: -15px;

  right: -155px;

  width: 310px;
}


  

  .intro__title {
    font-size:
      clamp(
        28px,
        7.2vw,
        36px
      );
  }


  .intro__text {
    margin-top: 15px;

    font-size: 19px;

    line-height: 1.5;
  }


  .appointment-link {
    width: fit-content;

    margin-top: 35px;

    font-size: 22px;
    
    justify-content: flex-start;

    gap: 12px;
  }


  .about {
  padding:
    50px
    28px
    75px;
}


.about__title {
  font-size: 32px;
}


.about__text {
  max-width: 315px;

  font-size: 15px;

  line-height: 1.65;
}


.about__text p + p {
  margin-top: 25px;
}


.about__feature {
  max-width: 360px;

  margin-top: 30px;
}


.about__bird {
  width: 100px;

  margin-bottom: -30px;
}


.about__card {
  padding:
    60px
    30px
    36px;

  border-radius: 32px;
}


.about__card-title {
  font-size: 18px;
}


.about__card-text {
  max-width: 270px;

  font-size: 14px;

  line-height: 1.7;
}


.about__pagination {
  margin-top: 28px;
}


.about__pagination-dot {
  width: 11px;
  height: 11px;
}


  /* Círculo */

  



}


/* ==========================================
   MÓVILES MUY PEQUEÑOS
========================================== */

@media (max-width: 380px) {

  .brand__logo {
    width: 140px;
  }


  .intro__card {
    padding-left: 23px;
    padding-right: 23px;
  }


  .intro__text {
    font-size: 17px;
  }

}


/* ==========================================
   ACCESIBILIDAD:
   REDUCIR ANIMACIONES
========================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

}