/* HEADER, FOTO, LOGO*/
:root{
  --beige-text: #E6D4BC;
  --pill-left-title-size: 2.5rem;
  --pill-right-title-size: 1.9rem;
}


.site-logo{ display:inline-flex; align-items:center; height:80px; margin-left:0.5rem; position:absolute; top:1rem; left:1rem; z-index:110000; }
.site-logo__img{ height:80px; width:auto; display:block; }


@media (min-width:768px){
  .site-logo{ height:80px; margin-left:0.25rem; top:1.2rem; left:1.2rem; }
  .site-logo__img{ height:130px; transform: translate(-35px, 15px ); } /*TAMAÑO LOGO*/
}
/*BOTON CONTACTO*/
.contact-btn {
  position: absolute;
  right: 1rem;
  top: 1.4rem; /*AJUSTAR POSICION VERTICAL*/
  z-index: 120000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: #201a12; 
  background: #E6D4BC;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.contact-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  opacity: 0.98;
}

.contact-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.contact-btn:focus{
  outline: 3px solid rgba(230,212,188,0.28);
  outline-offset: 4px;
}

@media (min-width:768px){
  .contact-btn{ right:1.5rem; top:1.6rem; font-size:1.05rem; }
}

/* TOP NAVEGADORES (BOTONES * 4)*/
.site-nav{
     display:flex; 
     gap:10rem; 
     justify-content:center; 
     align-items:center; 
     position:absolute; 
     left:50%; 
     transform:translateX(-40%); 
     top:1rem; 
     z-index:1100; 
}
.site-nav__link{
     font-family:'Playfair Display', serif; 
     color:var(--beige-text); 
     text-decoration:none; 
     font-size:2rem; 
     letter-spacing:0.02em; 
}
.site-nav__link:hover{
     text-decoration:underline; 
     opacity:0.95; 
}

@media (min-width:768px){
  .site-nav{ top:1.25rem; }
  .site-nav__link{ font-size:1.5rem; }
}
/*IMAGEN PRINCIPAL*/
.hero{
  position: relative;
  height: 70vh; /*AJUSTAR TAMAÑO DE LA IMAGEN, PERO NO LA IMAGEN*/
  width: 100%;
  overflow: visible;
  display: flex; 
  align-items: center;
  z-index: 60;
}

.hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  z-index: 0;
  display: block;
}

.hero__bg-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; 
}


@media (min-width:768px){
  .hero__bg{ object-position: 50% 8%; }
}
@media (min-width:1024px){
  .hero__bg{ object-position: 50% 50%; }
}
.hero__overlay{ position: absolute; inset:0; background: rgba(0,0,0,0.10); z-index:5; }

.hero__content{ position: relative; z-index:10; max-width:65rem; margin:0 auto; padding:30px 800px 0px 20px; color:var(--beige-text); text-align:left; }
.hero__content h1{ margin:0 0 0.4rem 0; font-family:'Playfair Display', serif; font-size:clamp(2rem,5vw,5.5rem); line-height:1.08; font-weight:700; }
.hero__content p{ margin-top:1rem; color: rgba(230,212,188,0.95); max-width:56rem; font-size:clamp(1rem,calc(0.7rem + 1vw), 2.5rem); line-height:1.55; }

/* Banner-specific appear-from-bottom animation for hero content */
.hero__content .js-animate-up {
  opacity: 0;
  transform: translate3d(0, var(--animate-offset-y, 28px), 0);
  transition: transform var(--animate-duration, 600ms) cubic-bezier(0.2,0.8,0.2,1), opacity var(--animate-duration, 600ms);
  transition-delay: var(--animate-delay, 0ms);
}
.hero__content .js-animate-up.is-animating {
  will-change: transform, opacity;
}
.hero__content .js-animate-up.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Pill text appear animation: same vertical slide */
.hero__pills .js-animate-up {
  opacity: 0;
  transform: translate3d(0, var(--animate-offset-y, 18px), 0);
  transition: transform var(--animate-duration, 600ms) cubic-bezier(0.2,0.8,0.2,1), opacity var(--animate-duration, 600ms);
  transition-delay: var(--animate-delay, 0ms);
}
.hero__pills .js-animate-up.is-animating {
  will-change: transform, opacity;
}
.hero__pills .js-animate-up.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.hero__pills .pill__icon.js-animate-up,
.hero__pills .pill_icon.js-animate-up {
  opacity: 0;
  transform: translate3d(0, var(--animate-icon-offset-y, 30px), 0);
  transition: transform var(--animate-duration, 600ms) cubic-bezier(0.2,0.8,0.2,1), opacity var(--animate-duration, 600ms);
  transition-delay: var(--animate-delay, 0ms);
}
.hero__pills .pill__icon.js-animate-up.is-visible,
.hero__pills .pill_icon.js-animate-up.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__content .js-animate-up:not([data-animate-force]),
  .hero__content .js-animate-up.is-visible:not([data-animate-force]),
  .hero__pills .js-animate-up:not([data-animate-force]),
  .hero__pills .js-animate-up.is-visible:not([data-animate-force]) {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero__content .js-animate-up[data-animate-force],
  .hero__content .js-animate-up.is-visible[data-animate-force],
  .hero__pills .js-animate-up[data-animate-force],
  .hero__pills .js-animate-up.is-visible[data-animate-force] {
  transition: transform var(--animate-duration, 600ms) cubic-bezier(0.2,0.8,0.2,1), opacity var(--animate-duration, 600ms) !important;
  }
}

/* View Transitions styling: animate main content on navigation when supported */
@supports (view-transition: name) {
  main { view-transition-name: page; }

  ::view-transition-old(main), ::view-transition-new(main) {
    animation: vt-slide 420ms cubic-bezier(.2,.8,.2,1);
  }

  @keyframes vt-slide {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}


/* PILLS, PILDORAS 1 Y 2*/
.hero__pills{
  position: absolute;
  bottom: -4rem; 
  left: 50%;
  transform: translateX(calc(-50% + 1.5rem));
  width: 100%;
  max-width: 80rem;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  z-index: 200000;
}

/* Solo para /contactanos: alargar un poco las pildoras aumentando el ancho maximo */
.hero__pills.is-contact{ max-width: 70rem; }
@media (min-width:768px){ .hero__pills.is-contact{ max-width: 76rem; } }
@media (min-width:1024px){ .hero__pills.is-contact{ max-width: 62rem; } } /*ALARGAR O ACHICAR PILDORAS*/
.hero__pills.is-whoare{ max-width: 80rem; }
@media (min-width:768px){ .hero__pills.is-whoare{ max-width: 76rem; } }
@media (min-width:1024px){ .hero__pills.is-whoare{ max-width: 62rem; } } /*ALARGAR O ACHICAR PILDORAS*/

.pill{
  border-radius: 9999px;
  height: 10rem;
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.08);
  position: relative;
}

/* PILDORA IZQUIERDA */
.pill--left{
  background: #4D2F10;
  color: rgba(255,255,255,0.95);
  flex: 1 1 70%;
  margin-left: -1rem;
  z-index: 200001;
  min-width: 0;
}
.pill--left .pill__title{ 
    font-family:'Playfair Display', serif; 
    font-weight:700; font-size:var(--pill-left-title-size); 
    margin:0 0 0.9rem 0; color:#fff; 
    line-height:1.02; }

.pill--left .pill__subtitle{ 
    color: rgba(255,255,255,0.92); 
    font-size: calc(var(--pill-left-title-size) * 0.5); 
    margin:0; }

.pill--left .pill__title, .pill--left .pill__subtitle{ 
    text-align:center; padding:0 1rem; 
}








    
/* AJUSTES ESPECIALES SOLO PARA /CONTACTANOS */
.pill--left.is-center > div{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pill--right.is-center{
  justify-content:center;
  padding-right:0;
}
.pill__icon{ width:120px; height:120px; object-fit:contain; display:block; }
/* Nudge the right-side pill icon slightly to the right for better visual alignment */
.hero__pills.is-contact .pill--right.is-center .pill__icon{ margin-left: 24px; }
@media (min-width:768px){
  .pill__icon{ width:150px; height:108px; }
  .hero__pills.is-contact .pill--right.is-center .pill__icon{ margin-left: 36px; }
}
@media (min-width:1024px){
  .pill__icon{ width:180px; height:250px; }
  .hero__pills.is-contact .pill--right.is-center .pill__icon{ margin-left: 110px; } /*Ajuste igual que otras secciones para 1280px*/
}
.hero__pills.is-contact{ max-width: 70rem; }
@media (min-width:768px){ .hero__pills.is-contact{ max-width: 76rem; } }
@media (min-width:1024px){ .hero__pills.is-contact{ max-width: 62rem; } } /*ALARGAR O ACHICAR PILDORAS*/
@media (min-width:1500px){
  .hero__pills.is-contact .pill--right.is-center .pill__icon{ margin-left: 175px; } /*Ajuste específico para 1920x1080*/
}

.h1-subtitulo{
  color: #524D46;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  margin: 0;
  font-weight: 700;
  text-align: center;
  padding: 0px 50px 0px 50px;
}



/* AJUSTES ESPECIALES SOLO PARA /QUIENES_SOMOS */
.pill--left.is-center > div{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pill--right.is-center{
  justify-content:center;
  padding-right:0;
}
.pill__icon{ width:120px; height:120px; object-fit:contain; display:block; }
.hero__pills.is-whoare .pill--right.is-center .pill__icon,
.hero__pills.is-whoare .pill--right.is-center .pill_icon { margin-left: 24px; }
@media (min-width:768px){
  .pill__icon{ width:150px; height:108px; }
  .hero__pills.is-whoare .pill--right.is-center .pill__icon,
  .hero__pills.is-whoare .pill--right.is-center .pill_icon { margin-left: 20px; }
}
@media (min-width:1024px){
  .pill__icon{ width:180px; height:250px; }
  .hero__pills.is-whoare .pill--right.is-center .pill__icon,
  .hero__pills.is-whoare .pill--right.is-center .pill_icon { margin-left: 110px; } /* ajuste para resoluciones alrededor de 1280px */
}
@media (min-width:1500px){
  .hero__pills.is-whoare .pill--right.is-center .pill__icon,
  .hero__pills.is-whoare .pill--right.is-center .pill_icon { margin-left: 175px; } /* ajuste específico para 1920x1080 */
}
.hero__pills.is-whoare{ max-width: 70rem; }
@media (min-width:768px){ .hero__pills.is-whoare{ max-width: 76rem; } }
@media (min-width:1024px){ .hero__pills.is-whoare{ max-width: 62rem; } } /*ALARGAR O ACHICAR PILDORAS*/




















/* PILDORA DERECHA */
.pill--right{
  background: #B69B77;
  color: #fff;
  flex: 0 0 30%;
  transform: translateX(-3rem);
  transition: transform 220ms ease;
  z-index: 200000;
  display:flex; justify-content:flex-end; padding-right:0.5rem;
}
.pill--right > div{ 
    width:100%; 
    box-sizing:border-box; 
}
.pill--right .pill_title2{
  font-family:'Playfair Display', serif;
  font-weight:700; font-size:1.1rem;
  margin:0 0 0.45rem 0;
  color:#fff;
  line-height:1.4;
  text-align:right;
  padding-right:4rem;
  word-break:break-word;
}
.pill--right .pill_title2__line2{
  display:block;
  margin-right: -3.3rem;
}




/* RESPONSIVE (MOBILE) */
@media (min-width:768px){
  .hero__pills{ --pill-left-title-size:2.5rem; --pill-right-title-size:3rem; }
  .pill{ height:11rem; }
  .pill{ height:11rem; }
  .pill--right{ flex:0 0 42%; transform: translateX(-10rem); } /*MOVER VERTICALMENTE PILL-RIGHT*/
  .pill--left{ transform: translateX(5rem); }
  .hero__pills { bottom: -6rem; transform: translateX(calc(-50% + 3rem)); } /*MOVER VERTICALMENTE Y HORIZONTALMENTE AMBAS PILDORAS*/
}
@media (min-width:1024px){
  .hero__content{ padding-left:3rem; }
  .pill--right .pill_title2{ font-size:1.9rem; }
}

/* Ajustes finos para pantallas medianas (ej. 1280x720) */
@media (max-width: 1366px){
  .site-nav{ gap:6rem; top:0.9rem; transform:translateX(-38%); }
  .site-nav__link{ font-size:1.35rem; }
  .hero{ height: 64vh; }
  .hero__content{ padding:24px 520px 24px 1.5rem; max-width:none; }
  .hero__content h1{ font-size:clamp(2.2rem,3.2vw,3.4rem); line-height:1.05; }
  .hero__content p{ max-width:44rem; font-size:clamp(0.95rem,1.1vw,1.15rem); line-height:1.45; }
  .hero__pills{ max-width:72rem; bottom:-4.75rem; transform: translateX(calc(-50% + 1rem)); --pill-left-title-size:2.15rem; }
  .pill{ height:9.5rem; }
  .pill--left{ flex-basis:66%; margin-left:-0.25rem; }
  .pill--right{ flex-basis:34%; transform: translateX(-6rem); }
  .pill--right .pill_title2{ font-size:1.6rem; padding-right:2.25rem; }
  .pill--right .pill_title2__line2{ margin-right:-2rem; }
}
@media (max-width: 1280px){
  .hero__content{ padding-right:420px; }
  .hero__content h1{ font-size:clamp(3rem,2.9vw,3.1rem); padding: 30px 0px 0px 0px; }
  .hero__content p{ font-size:clamp(0.92rem,2vw,1.05rem); }
  .hero__pills{ max-width:68rem; bottom:-4.5rem; }
  .pill{ height:9rem; }
  .pill--left .pill__title{ font-size:2rem; }
  .pill--left .pill__subtitle{ font-size:1rem; }
  .pill--right{ transform: translateX(-5rem); }
  .pill--right .pill_title2{ padding-right:1.75rem; font-size:1.5rem; }
}