/* =========================================
   COLORES
========================================= */

:root {

  --charcoal: #1E1E1E;

  --ivory: #F8F6F2;

  --warm-gray: #D9D5CE;

  --terracotta: #C8755D;

  --olive: #7A8065;

  --white: #FFFFFF;


  --muted:
    rgba(30, 30, 30, 0.64);

  --line:
    rgba(30, 30, 30, 0.12);


  --leaf:
    64% 8px 64% 8px;

}


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

*,
*::before,
*::after {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}


body {

  margin: 0;

  background:
    var(--ivory);

  color:
    var(--charcoal);

  font-family:
    "Outfit",
    sans-serif;

  font-weight: 300;

  line-height: 1.65;

  overflow-x: hidden;

}


img {

  display: block;

  width: 100%;

}


a {

  color: inherit;

}


button {

  font: inherit;

}


h1,
h2,
h3 {

  margin: 0;

  font-family:
    "Instrument Serif",
    Georgia,
    serif;

  font-weight: 400;

  line-height: 1.05;

}


p {

  margin: 0;

}


.wrap {

  width:
    min(1160px, 92vw);

  margin:
    0 auto;

}


/* =========================================
   GENERALES
========================================= */

.eyebrow {

  color:
    var(--olive);

  font-size:
    11.5px;

  font-weight:
    600;

  letter-spacing:
    0.24em;

  text-transform:
    uppercase;

}


.eyebrow-light {

  color:
    rgba(255, 255, 255, 0.72);

}


.button {

  min-height:
    52px;

  padding:
    0 27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid transparent;

  border-radius:
    999px;

  text-decoration:
    none;

  font-weight:
    500;

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

}


.button-primary {

  background:
    var(--terracotta);

  color:
    white;

}


.button-primary:hover {

  transform:
    translateY(-2px);

  filter:
    brightness(0.94);

}


.button-outline {

  border-color:
    var(--olive);

  color:
    var(--olive);

}


.button-outline:hover {

  background:
    var(--olive);

  color:
    white;

  transform:
    translateY(-2px);

}


/* =========================================
   NAVBAR
========================================= */

.site-nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index:
    1000;

  background:
    rgba(248, 246, 242, 0.94);

  backdrop-filter:
    blur(12px);

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

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

  transition:
    box-shadow 0.3s ease,
    background 0.3s ease;

}


.site-nav.scrolled {

  background:
    rgba(248, 246, 242, 0.98);

  box-shadow:
    0 10px 30px -24px
    rgba(30, 30, 30, 0.55);

}


.nav-inner {

  width:
    min(1160px, 92vw);

  min-height:
    76px;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-right:
    auto;

  text-decoration:
    none;

}


.brand-icon {

  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  flex:
    none;

  background:
    var(--olive);

  color:
    var(--ivory);

  border-radius:
    var(--leaf);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    21px;

}


.brand-text strong {

  display:
    block;

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    21px;

  font-weight:
    400;

  line-height:
    1.05;

}


.brand-text small {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;

}


.desktop-menu {

  display:
    flex;

  align-items:
    center;

  gap:
    26px;

}


.desktop-menu a {

  text-decoration:
    none;

  font-size:
    14px;

}


.nav-cta {

  min-height:
    47px;

  padding:
    0 22px !important;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    999px;

  background:
    var(--terracotta);

  color:
    white;

  font-weight:
    500;

}


/* =========================================
   MENÚ MOBILE
========================================= */

.burger {

  display:
    none;

  width:
    46px;

  height:
    46px;

  padding:
    0;

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

  border-radius:
    var(--leaf);

  background:
    transparent;

  cursor:
    pointer;

}


.burger span {

  display:
    block;

  width:
    19px;

  height:
    1.5px;

  margin:
    4px auto;

  background:
    var(--charcoal);

  transition:
    0.3s ease;

}


.burger.active span:nth-child(1) {

  transform:
    translateY(5.5px)
    rotate(45deg);

}


.burger.active span:nth-child(2) {

  opacity:
    0;

}


.burger.active span:nth-child(3) {

  transform:
    translateY(-5.5px)
    rotate(-45deg);

}


.mobile-menu {

  display:
    none;

  max-height:
    0;

  overflow:
    hidden;

  background:
    var(--ivory);

  transition:
    max-height 0.4s ease;

}


.mobile-menu.open {

  max-height:
    520px;

}


.mobile-menu > a {

  display:
    block;

  width:
    92%;

  margin:
    auto;

  padding:
    15px 0;

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

  text-decoration:
    none;

}


.mobile-whatsapp {

  margin-bottom:
    18px !important;

  padding:
    13px !important;

  border:
    none !important;

  border-radius:
    999px;

  background:
    var(--terracotta);

  color:
    white;

  text-align:
    center;

}


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

.hero {

  position:
    relative;

  padding:
    145px 0 90px;

  overflow:
    hidden;

}


.hero::before {

  content:
    "";

  position:
    absolute;

  width:
    620px;

  height:
    620px;

  right:
    -180px;

  top:
    -130px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(122, 128, 101, 0.22),
      transparent 70%
    );

}


.hero-grid {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    1.06fr 0.94fr;

  gap:
    clamp(35px, 5vw, 72px);

  align-items:
    center;

}


.hero h1 {

  margin-top:
    16px;

  font-size:
    clamp(48px, 6.4vw, 82px);

}


.hero h1 em {

  position:
    relative;

  display:
    inline-block;

  color:
    var(--terracotta);

  font-style:
    italic;

}


.hero h1 em svg {

  position:
    absolute;

  left:
    0;

  bottom:
    -0.14em;

  width:
    100%;

  height:
    0.28em;

}


.hero h1 em path {

  stroke:
    var(--olive);

  stroke-width:
    5;

  fill:
    none;

  stroke-linecap:
    round;

  stroke-dasharray:
    420;

  stroke-dashoffset:
    420;

  animation:
    drawLine
    1.4s
    0.7s
    ease
    forwards;

}


@keyframes drawLine {

  to {

    stroke-dashoffset:
      0;

  }

}


.lead {

  max-width:
    52ch;

  margin-top:
    27px;

  color:
    var(--charcoal);

  font-size:
    clamp(18px, 1.4vw, 21px);

  font-weight:
    400;

}


.hero-description {

  max-width:
    54ch;

  margin-top:
    12px;

  color:
    var(--muted);

  font-size:
    16px;

}


.hero-buttons {

  margin-top:
    31px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    14px;

}


.hero-meta {

  margin-top:
    31px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px 23px;

  color:
    var(--muted);

  font-size:
    13px;

}


.hero-meta span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

}


.hero-meta i {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--olive);

}


.hero-art {

  position:
    relative;

}


.hero-image-frame {

  overflow:
    hidden;

  border-radius:
    var(--leaf);

  box-shadow:
    0 40px 70px -44px
    rgba(30, 30, 30, 0.55);

}


.hero-image-frame img {

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  object-position:
    center;

}


.hero-art::after {

  content:
    "";

  position:
    absolute;

  inset:
    18px -18px -18px 18px;

  z-index:
    -1;

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

  border-radius:
    var(--leaf);

}


/* GOOGLE */

.google-chip {

  position:
    absolute;

  left:
    -10px;

  bottom:
    28px;

  padding:
    14px 18px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  background:
    var(--ivory);

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

  border-radius:
    18px;

  box-shadow:
    0 20px 40px -26px
    rgba(30, 30, 30, 0.65);

  text-decoration:
    none;

}


.rating {

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    31px;

}


.stars {

  color:
    var(--terracotta);

  letter-spacing:
    2px;

}


.google-chip small {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

}


/* =========================================
   STATS
========================================= */

.stats {

  padding:
    55px 0;

  background:
    var(--charcoal);

  color:
    white;

}


.stats-grid {

  display:
    grid;

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

}


.stat {

  padding:
    10px 25px;

  text-align:
    center;

}


.stat + .stat {

  border-left:
    1px solid
    rgba(255, 255, 255, 0.15);

}


.counter {

  display:
    block;

  color:
    var(--terracotta);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    clamp(44px, 5vw, 60px);

}


.stat p {

  margin-top:
    11px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size:
    11px;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

}


/* =========================================
   SOBRE MÍ
========================================= */

.about {

  padding:
    clamp(70px, 8vw, 105px)
    0;

  background:
    var(--warm-gray);

}


.about-grid {

  display:
    grid;

  grid-template-columns:
    0.88fr 1.12fr;

  gap:
    clamp(35px, 5vw, 70px);

  align-items:
    center;

}


.about-image {

  overflow:
    hidden;

  border-radius:
    8px 64% 8px 64%;

  box-shadow:
    0 35px 60px -42px
    rgba(30, 30, 30, 0.65);

}


.about-image img {

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  object-position:
    center;

}


.about-content h2 {

  margin:
    14px 0 25px;

  font-size:
    clamp(40px, 4.5vw, 56px);

}


.about-content p {

  max-width:
    56ch;

  color:
    rgba(30, 30, 30, 0.72);

}


.about-content p + p {

  margin-top:
    17px;

}


.signature {

  margin-top:
    26px;

  color:
    var(--olive);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    31px;

  font-style:
    italic;

}


/* =========================================
   CONSULTAS
========================================= */

.consultations {

  padding:
    clamp(70px, 8vw, 105px)
    0;

}


.consult-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

}


.consult-heading h2 {

  margin-top:
    13px;

  font-size:
    clamp(42px, 4.6vw, 58px);

}


.consult-heading > p {

  max-width:
    44ch;

  color:
    var(--muted);

}


.consult-grid {

  margin-top:
    45px;

  display:
    grid;

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

  gap:
    25px;

}


.consult-card {

  padding:
    32px 27px;

  background:
    white;

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

  border-radius:
    20px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.consult-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 28px 45px -38px
    rgba(30, 30, 30, 0.65);

}


.consult-card > span,
.consult-card > div > span {

  color:
    var(--terracotta);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    16px;

}


.consult-card h3 {

  margin:
    12px 0 11px;

  font-size:
    29px;

}


.consult-card p {

  color:
    var(--muted);

  font-size:
    15px;

}


.consult-wide {

  grid-column:
    span 2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    35px;

}


.consult-wide > div {

  max-width:
    650px;

}


/* =========================================
   TEMAS
========================================= */

.topics {

  padding:
    clamp(70px, 8vw, 105px)
    0;

  background:
    var(--charcoal);

  color:
    white;

}


.topics h2 {

  margin-top:
    14px;

  font-size:
    clamp(40px, 4.6vw, 56px);

}


.topics-description {

  max-width:
    48ch;

  margin-top:
    18px;

  color:
    rgba(255, 255, 255, 0.65);

}


.gallery {

  margin-top:
    45px;

  display:
    grid;

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

  gap:
    20px;

}


.gallery-card {

  position:
    relative;

  width:
    100%;

  padding:
    0;

  display:
    block;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    18px;

  background:
    transparent;

  color:
    white;

  cursor:
    pointer;

  text-align:
    left;

}


.gallery-card img {

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  transition:
    transform 0.55s ease;

}


.gallery-card:hover img {

  transform:
    scale(1.05);

}


.gallery-caption {

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  padding:
    52px 16px 16px;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.9)
    );

  font-size:
    13.5px;

}


.plus {

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    35px;

  height:
    35px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--ivory);

  color:
    var(--charcoal);

}


/* =========================================
   RECETAS
========================================= */

.recipes {

  padding:
    clamp(70px, 8vw, 105px)
    0;

}


.recipes-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    45px;

}


.recipes-heading h2 {

  margin-top:
    13px;

  font-size:
    clamp(42px, 4.5vw, 56px);

}


.recipes-heading > p {

  max-width:
    42ch;

  color:
    var(--muted);

}


.recipe-grid {

  display:
    grid;

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

  gap:
    28px;

}


.recipe-card {

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    white;

  border:
    1px solid
    rgba(122, 128, 101, 0.22);

  border-radius:
    22px;

  box-shadow:
    0 15px 40px -35px
    rgba(30, 30, 30, 0.5);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.recipe-card:hover {

  transform:
    translateY(-6px);

  box-shadow:
    0 30px 50px -38px
    rgba(30, 30, 30, 0.65);

}


.recipe-card img {

  width:
    100%;

  aspect-ratio:
    4 / 3;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 0.5s ease;

}


.recipe-card:hover img {

  transform:
    scale(1.03);

}


.recipe-content {

  flex:
    1;

  padding:
    26px;

  display:
    flex;

  flex-direction:
    column;

}


.recipe-tag {

  color:
    var(--olive);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

}


.recipe-card h3 {

  margin:
    11px 0 13px;

  font-size:
    clamp(28px, 2.4vw, 34px);

}


.recipe-card p {

  margin-bottom:
    22px;

  color:
    var(--muted);

  font-size:
    15px;

}


.recipe-button {

  margin-top:
    auto;

  padding:
    0;

  width:
    fit-content;

  border:
    0;

  background:
    transparent;

  color:
    var(--terracotta);

  font-size:
    14px;

  font-weight:
    600;

  cursor:
    pointer;

}


.recipe-button:hover {

  color:
    var(--olive);

}


/* =========================================
   OPINIONES
========================================= */

.reviews {

  padding:
    clamp(70px, 8vw, 105px)
    0;

}


.reviews-heading {

  margin-bottom:
    45px;

}


.reviews-heading h2 {

  margin-top:
    15px;

  font-size:
    clamp(48px, 5vw, 65px);

}


/* GRID DE 6 COLUMNAS PARA PODER
   HACER 3 ARRIBA + 2 CENTRADAS */

.review-grid {

  display:
    grid;

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

  gap:
    28px;

  align-items:
    start;

}


/* PRIMERA */

.review-js:nth-child(1) {

  grid-column:
    1 / span 2;

}


/* SEGUNDA DEL CENTRO
   UN POCO MÁS ABAJO */

.review-js:nth-child(2) {

  grid-column:
    3 / span 2;

  margin-top:
    38px;

}


/* TERCERA */

.review-js:nth-child(3) {

  grid-column:
    5 / span 2;

}


/* CUARTA ABAJO */

.review-js:nth-child(4) {

  grid-column:
    2 / span 2;

}


/* QUINTA ABAJO */

.review-js:nth-child(5) {

  grid-column:
    4 / span 2;

}


/* TARJETA */

.review-card {

  padding:
    29px 27px;

  background:
    var(--ivory);

  border:
    1px solid
    rgba(122, 128, 101, 0.28);

  border-radius:
    22px;

  box-shadow:
    0 18px 45px -42px
    rgba(30, 30, 30, 0.6);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.review-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 26px 50px -40px
    rgba(30, 30, 30, 0.6);

}


.review-quote {

  display:
    block;

  height:
    25px;

  color:
    var(--olive);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    48px;

  line-height:
    0.8;

}


.review-text {

  margin-top:
    18px !important;

  white-space:
    pre-line;

  color:
    rgba(30, 30, 30, 0.78);

  font-size:
    15px;

  line-height:
    1.75;

}


.review-card footer {

  margin-top:
    23px;

  padding-top:
    17px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

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

}


.review-avatar {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  flex:
    none;

  background:
    var(--olive);

  color:
    white;

  border-radius:
    var(--leaf);

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    18px;

}


.review-card footer strong {

  display:
    block;

  color:
    var(--charcoal);

  font-size:
    14px;

  font-weight:
    500;

}


.review-google {

  display:
    block;

  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    12px;

}


/* =========================================
   OPINIONES OCULTAS
========================================= */

.review-extra {

  display:
    none;

  margin-top:
    0 !important;

}


.review-extra.show {

  display:
    block;

  animation:
    showReview
    0.45s
    ease
    both;

}


/* DAYANA */

.review-extra:nth-child(6) {

  grid-column:
    1 / span 2;

}


/* IRVIN */

.review-extra:nth-child(7) {

  grid-column:
    3 / span 2;

}


/* REGINA */

.review-extra:nth-child(8) {

  grid-column:
    5 / span 2;

}


@keyframes showReview {

  from {

    opacity:
      0;

    transform:
      translateY(15px);

  }


  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* =========================================
   BOTÓN VER MÁS
========================================= */

.reviews-more-wrap {

  margin-top:
    38px;

  text-align:
    center;

}


.reviews-more-button {

  min-height:
    50px;

  padding:
    0 28px;

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

  border-radius:
    999px;

  background:
    transparent;

  color:
    var(--olive);

  font-size:
    14px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:
    0.25s ease;

}


.reviews-more-button:hover {

  background:
    var(--olive);

  color:
    white;

  transform:
    translateY(-2px);

}


.reviews-footer {

  margin-top:
    24px;

  text-align:
    center;

}


.google-reviews-link {

  display:
    inline-block;

  color:
    var(--olive);

  font-size:
    15px;

  text-decoration:
    underline;

  text-underline-offset:
    5px;

}


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

.contact {

  padding:
    clamp(70px, 8vw, 105px)
    0;

  background:
    var(--warm-gray);

}


.contact-grid {

  display:
    grid;

  grid-template-columns:
    1.05fr 0.95fr;

  gap:
    clamp(35px, 5vw, 65px);

  align-items:
    center;

}


.contact h2 {

  margin:
    14px 0 24px;

  font-size:
    clamp(44px, 4.7vw, 60px);

}


.contact-description {

  max-width:
    49ch;

  color:
    var(--muted);

}


.contact-items {

  margin-top:
    30px;

}


.contact-item {

  padding:
    17px 0;

  border-top:
    1px solid
    rgba(30, 30, 30, 0.15);

}


.contact-item:last-child {

  border-bottom:
    1px solid
    rgba(30, 30, 30, 0.15);

}


.contact-item strong {

  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--olive);

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.contact-item a {

  color:
    var(--charcoal);

  text-decoration:
    none;

}


.contact-item a:hover {

  color:
    var(--terracotta);

  text-decoration:
    underline;

}


.contact-note {

  margin-top:
    24px;

  color:
    var(--muted);

  font-size:
    13px;

}


.contact-image {

  overflow:
    hidden;

  border-radius:
    64% 8px 64% 8px;

  box-shadow:
    0 35px 60px -42px
    rgba(30, 30, 30, 0.65);

}


.contact-image img {

  aspect-ratio:
    3 / 4;

  object-fit:
    cover;

  object-position:
    center;

}


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

.footer {

  padding:
    42px 0;

  background:
    var(--charcoal);

  color:
    rgba(255, 255, 255, 0.72);

}


.footer-inner {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;

}


.footer-inner > div {

  display:
    flex;

  flex-direction:
    column;

}


.footer-inner strong {

  color:
    white;

  font-family:
    "Instrument Serif",
    serif;

  font-size:
    20px;

  font-weight:
    400;

}


.footer-links {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px;

}


.footer-links a {

  text-decoration:
    none;

  font-size:
    13px;

}


.footer-links a:hover {

  color:
    var(--terracotta);

}


.footer-inner > p {

  width:
    100%;

  margin-top:
    10px;

  padding-top:
    20px;

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

  font-size:
    11px;

}


/* =========================================
   WHATSAPP
========================================= */

.whatsapp-floating {

  position:
    fixed;

  right:
    20px;

  bottom:
    20px;

  z-index:
    1200;

  width:
    62px;

  height:
    62px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #25D366;

  color:
    white;

  text-decoration:
    none;

  font-size:
    23px;

  box-shadow:
    0 15px 30px -10px
    rgba(0, 0, 0, 0.4);

}


/* =========================================
   MODALES
========================================= */

.lightbox,
.recipe-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    2000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;

  background:
    rgba(20, 20, 20, 0.94);

}


.lightbox.open,
.recipe-modal.open {

  display:
    flex;

}


.lightbox figure {

  width:
    min(560px, 92vw);

  margin:
    0;

}


.lightbox img {

  max-height:
    78vh;

  object-fit:
    contain;

  border-radius:
    15px;

}


.lightbox figcaption {

  margin-top:
    14px;

  color:
    white;

  text-align:
    center;

}


.lightbox-close,
.recipe-close {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  z-index:
    10;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.5);

  color:
    white;

  font-size:
    26px;

  cursor:
    pointer;

}


.recipe-modal-card {

  position:
    relative;

  width:
    min(950px, 94vw);

  max-height:
    90vh;

  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  overflow:
    auto;

  background:
    var(--ivory);

  border-radius:
    25px;

}


.recipe-modal-card > img {

  height:
    100%;

  min-height:
    520px;

  object-fit:
    cover;

}


.recipe-modal-content {

  padding:
    45px;

  overflow-y:
    auto;

}


.recipe-modal-content h2 {

  margin:
    12px 0 25px;

  font-size:
    46px;

}


.recipe-modal-content h4 {

  margin-top:
    24px;

  margin-bottom:
    8px;

  color:
    var(--olive);

}


.recipe-modal-content ul {

  padding-left:
    21px;

  color:
    var(--muted);

}


.recipe-modal-content li {

  margin-bottom:
    7px;

}


.recipe-modal-content p {

  white-space:
    pre-line;

}


/* =========================================
   REVEAL
========================================= */

.reveal {

  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}


.reveal.visible {

  opacity:
    1;

  transform:
    none;

}


/* =========================================
   TABLET
========================================= */

@media
(max-width: 950px) {


  .desktop-menu {

    display:
      none;

  }


  .burger {

    display:
      block;

  }


  .mobile-menu {

    display:
      block;

  }


  .hero-grid,
  .about-grid,
  .contact-grid {

    grid-template-columns:
      1fr;

  }


  .hero-art,
  .about-image,
  .contact-image {

    width:
      100%;

    max-width:
      500px;

    margin:
      auto;

  }


  .stats-grid {

    grid-template-columns:
      1fr;

  }


  .stat + .stat {

    border-left:
      0;

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

    padding-top:
      30px;

  }


  .consult-heading {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .consult-grid {

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

  }


  .consult-wide {

    grid-column:
      span 2;

  }


  .gallery {

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

  }


  .recipe-grid {

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

  }


  .recipes-heading {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .review-grid {

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

  }


  .review-js:nth-child(1),
  .review-js:nth-child(2),
  .review-js:nth-child(3),
  .review-js:nth-child(4),
  .review-js:nth-child(5),
  .review-extra:nth-child(6),
  .review-extra:nth-child(7),
  .review-extra:nth-child(8) {

    grid-column:
      auto;

    margin-top:
      0;

  }


  .recipe-modal-card {

    grid-template-columns:
      1fr;

  }


  .recipe-modal-card > img {

    min-height:
      0;

    aspect-ratio:
      16 / 9;

  }

}


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

@media
(max-width: 600px) {


  html {

    scroll-padding-top:
      70px;

  }


  .wrap {

    width:
      min(92vw, 520px);

  }


  .nav-inner {

    min-height:
      68px;

  }


  .brand-icon {

    width:
      40px;

    height:
      40px;

  }


  .brand-text strong {

    font-size:
      18px;

  }


  /* HERO */

  .hero {

    padding:
      110px 0 65px;

  }


  .hero h1 {

    font-size:
      clamp(42px, 13vw, 52px);

  }


  .lead {

    font-size:
      18px;

  }


  .hero-description {

    font-size:
      15px;

  }


  .hero-buttons {

    flex-direction:
      column;

  }


  .button {

    width:
      100%;

  }


  .hero-meta {

    flex-direction:
      column;

    gap:
      10px;

  }


  .google-chip {

    left:
      8px;

    right:
      8px;

    bottom:
      18px;

    width:
      auto;

  }


  /* SECCIONES */

  .about,
  .consultations,
  .topics,
  .recipes,
  .reviews,
  .contact {

    padding-top:
      70px;

    padding-bottom:
      70px;

  }


  .about-content h2,
  .consult-heading h2,
  .topics h2,
  .recipes-heading h2,
  .reviews-heading h2,
  .contact h2 {

    font-size:
      clamp(39px, 12vw, 48px);

  }


  /* CONSULTAS */

  .consult-grid {

    grid-template-columns:
      1fr;

  }


  .consult-wide {

    grid-column:
      span 1;

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  /* GALERÍA */

  .gallery {

    grid-template-columns:
      1fr;

  }


  /* RECETAS */

  .recipe-grid {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  .recipe-card {

    border-radius:
      18px;

  }


  .recipe-content {

    padding:
      21px;

  }


  .recipe-card h3 {

    font-size:
      29px;

  }


  /* RESEÑAS */

  .review-grid {

    grid-template-columns:
      1fr;

    gap:
      19px;

  }


  .review-js:nth-child(1),
  .review-js:nth-child(2),
  .review-js:nth-child(3),
  .review-js:nth-child(4),
  .review-js:nth-child(5),
  .review-extra:nth-child(6),
  .review-extra:nth-child(7),
  .review-extra:nth-child(8) {

    grid-column:
      auto;

    margin-top:
      0;

  }


  .review-card {

    padding:
      23px 20px;

    border-radius:
      18px;

  }


  .review-text {

    font-size:
      14.5px;

    line-height:
      1.7;

  }


  .reviews-more-wrap {

    margin-top:
      27px;

  }


  .reviews-more-button {

    width:
      100%;

  }


  /* CONTACTO */

  .contact-item a,
  .contact-item span {

    overflow-wrap:
      anywhere;

  }


  /* FOOTER */

  .footer-inner {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .footer-links {

    flex-direction:
      column;

    gap:
      8px;

  }


  /* WHATSAPP */

  .whatsapp-floating {

    width:
      56px;

    height:
      56px;

    right:
      14px;

    bottom:
      14px;

  }


  /* MODAL */

  .recipe-modal {

    padding:
      12px;

  }


  .recipe-modal-card {

    width:
      100%;

    max-height:
      94vh;

    border-radius:
      18px;

  }


  .recipe-modal-card > img {

    width:
      100%;

    height:
      auto;

    min-height:
      0;

    aspect-ratio:
      4 / 3;

    object-fit:
      cover;

  }


  .recipe-modal-content {

    padding:
      27px 21px;

  }


  .recipe-modal-content h2 {

    font-size:
      38px;

  }

}


/* =========================================
   ACCESIBILIDAD
========================================= */

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

  html {

    scroll-behavior:
      auto;

  }


  *,
  *::before,
  *::after {

    animation:
      none !important;

    transition:
      none !important;

  }


  .reveal {

    opacity:
      1;

    transform:
      none;

  }

}