/* Saltos de línea solo en mobile */
.only-mobile { display: none; }
@media (max-width: 768px) { .only-mobile { display: inline; } }
/* Fonts */
@font-face {
  font-family: "BrittanySignature";
  src: url("fonts/BrittanySignature.eot");
  src: local("☺"), url("fonts/BrittanySignature.woff") format("woff"), url("fonts/BrittanySignature.svg") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Book.eot");
  src: local("☺"), url("fonts/Gotham-Book.woff") format("woff"), url("fonts/Gotham-Book.svg") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Bold.eot");
  src: local("☺"), url("fonts/Gotham-Bold.woff") format("woff"), url("fonts/Gotham-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-gray: #2f2f2f;
  --text: #0f0f0f;
  --muted: #6b6b6b;
  --white: #ffffff;
  --black: #000000;
  --primary: #39ead7; /* turquesa del botón */
  --nav-bg: rgba(51, 51, 51, 0.85);
}

* { box-sizing: border-box; }
html { 
  scroll-behavior: smooth;
}
html, body { 
  height: 100%; 
  margin: 0;
  padding: 0;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Clase para elementos que se animan al scroll */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
}

/* Clase para parallax */
.parallax-section {
  position: relative;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Gotham", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: #f2f2f2;
  overflow-x: hidden;
}

/* Header */
.site-header {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

/* Fondo a full de pantalla en el header */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imgs/header/background-silvia-espinoza-1.jpg") center center / cover no-repeat;
  z-index: -3;
}

.nav {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 1060px);
  height: 64px;
  background: var(--nav-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  backdrop-filter: saturate(120%) blur(2px);
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.signature { font-family: "BrittanySignature", cursive; color: var(--white); font-size: 26px; transition: transform 0.3s ease; }
.signature:hover { transform: scale(1.05); }
.menu { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 28px; }
.menu a { color: var(--white); text-decoration: none; font-size: 13px; letter-spacing: .02em; opacity: .95; position: relative; transition: all 0.3s ease; }
.menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease; }
.menu a:hover { opacity: 1; }
.menu a:hover::after { width: 100%; }
.menu a.active { font-weight: 700; }
.menu a.active::after { width: 100%; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 36px; border: 0; background: transparent; cursor: pointer; transition: transform 0.3s ease; }
.menu-toggle:hover { transform: scale(1.1); }
.menu-toggle span { display: block; height: 3px; background: var(--white); margin: 6px 0; border-radius: 2px; transition: all 0.3s ease; }

.hero { position: relative; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: end; width: min(1200px, 92%); margin: 0 auto; padding: 0; }
.hero-bg { display: none; }
.hero-gradient { display: none; }

/* Anclar el degradado al borde inferior del divider */
.hero-copy { position: relative; z-index: 1; }
.divider { position: relative; margin-left: -80px; width: calc(min(520px, 70%) + 80px); }
.divider::after {
  content: "";
  position: absolute;
  left: -80px; /* desplazar hacia la izquierda para coincidir con diseño */
  bottom: 0; /* alineado al borde inferior del divider */
  width: 520px;
  height: 540px;
  background: url("imgs/header/degradad-verde.png") left bottom / contain no-repeat;
  mix-blend-mode: screen;
  opacity: .9;
  z-index: -2;
  pointer-events: none;
}
.hero-media { position: absolute; left: 50%; transform: translateX(-58%); bottom: 0; z-index: -1; }
.portrait { display: block; width: clamp(260px, 30vw, 520px); height: auto; }

.hero-copy { align-self: center; grid-column: 2; justify-self: start; padding-left: clamp(12px, 3vw, 28px); padding-right: clamp(8px, 2vw, 16px); max-width: 640px; margin-top: clamp(100px, 12vh, 160px); }
.hero-title { margin: 0 0 8px; font-weight: 700; font-size: clamp(56px, 7.2vw, 96px); line-height: .9; text-transform: uppercase; animation: fadeInUp 1s ease-out; }
.hero-title span { display: block; }
.hero-title span:nth-child(1) { animation: slideInLeft 0.8s ease-out; }
.hero-title span:nth-child(2) { animation: slideInLeft 0.8s ease-out 0.2s backwards; }
.divider { width: min(520px, 70%); height: 3px; background: #e6e6e6; margin: 14px 0 22px; animation: fadeIn 1s ease-out 0.4s backwards; }
.role { margin: 0 0 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; animation: fadeInUp 1s ease-out 0.6s backwards; }
.quote { margin: 0 0 24px; color: #333; animation: fadeInUp 1s ease-out 0.8s backwards; }
.quote strong { display: block; font-weight: 700; }
.quote-sub { display: block; font-weight: 400; color: #4a4a4a; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeInUp 1s ease-out 1s backwards; }
.btn { display: inline-block; padding: 14px 20px; border-radius: 24px; text-decoration: none; font-weight: 700; letter-spacing: .02em; font-size: 14px; transition: all 0.3s ease; }
.btn-primary { background: var(--primary); color: var(--black); }
.btn-primary:hover { background: #2dd4c1; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(57, 234, 215, 0.4); }
.btn-dark { background: #1a1a1a; color: var(--white); }
.btn-dark:hover { background: #000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.portrait { animation: fadeIn 1.2s ease-out 0.3s backwards; }

/* Tablet */
@media (max-width: 1024px) {
  .nav { width: min(94%, 860px); }
  .hero { grid-template-columns: 1fr; align-items: end; }
  /* Mantener la imagen pegada a la izquierda en tablet */
  .hero-media { left: 0; transform: none; }
  /* Ajuste del degradado anclado al divider para tablet */
  .divider { margin-left: -70px; width: calc(70% + 70px); }
  .divider::after { width: 468px; height: 486px; left: -70px; }
  .hero-copy { align-self: end; padding-bottom: 40px; grid-column: 1; justify-self: start; }
  /* Tablet: 80% del tamaño de desktop (570px * 0.8 = 456px) */
  .portrait { width: 513px; }
  /* Sombra blanca para el título en tablet */
  .hero-title { text-shadow: 0 0 14px rgba(255, 255, 255, 0.7); }
  /* Sombra blanca para textos secundarios en tablet */
  .role, .quote, .quote-sub { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
}

/* Mobile */
@media (max-width: 768px) {
  .menu { display: none; }
  .menu-toggle { display: block; }
  body.nav-open .menu { position: absolute; right: 16px; top: 64px; display: flex; flex-direction: column; gap: 14px; background: var(--nav-bg); padding: 16px 18px; border-radius: 10px; }
  .nav { height: 56px; padding: 0 14px; }
  .signature { font-size: 22px; }
  .hero { height: 100vh; }
  .hero-copy { margin-top: clamp(80px, 14vh, 120px); grid-column: 1; justify-self: start; }
  /* Mobile: 80% del tamaño de desktop (570px * 0.8 = 456px) */
  .portrait { width: 456px; }
  .hero-title { font-size: clamp(44px, 12vw, 64px); }
  .divider { width: calc(52% + 60px); margin-left: -60px; }
  /* Ajuste del degradado anclado al divider para mobile */
  .divider::after { width: 420px; height: 440px; left: -60px; }
  /* Sombra blanca para el título en mobile */
  .hero-title { text-shadow: 0 0 14px rgba(255, 255, 255, 0.7); }
  /* Sombra blanca para textos secundarios en mobile */
  .role, .quote, .quote-sub { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
}

/* Section One */
.section-one {
  position: relative;
  color: var(--text);
  padding: 80px 0;
  overflow: hidden;
  background-color: #1b7e7b;
}
.section-one::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imgs/section1/background-silvia-espinoza-02.jpg") right top / cover no-repeat;
  opacity: 1;
  z-index: 0; /* por encima del color de fondo */
}
.section-one__inner { width: min(1200px, 92%); margin: 0 auto; position: relative; z-index: 1; }
.section-one__header { max-width: 820px; margin-bottom: 32px; }
.sec1-title { margin: 0 0 8px; font-weight: 700; font-size: clamp(28px, 4vw, 40px); color: #ffffff; }
.sec1-sub { margin: 0; color: rgba(255, 255, 255, 0.6); }

/* Section Bio */
.section-bio { background: #3F3F3F; color: #fff; position: relative; padding: 80px 0; }
.section-bio::before { content: ""; position: absolute; inset: 0; background: url("imgs/section-bio/Background-bio-silvia-espinoza.jpg") left top / cover no-repeat; opacity: 1; z-index: 0; }
 .bio__inner { width: min(1600px, 95%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.bio__media img { width: 100%; height: auto; display: block; border-radius: 14px; }
 .bio-band { background: #000; display: flex; align-items: flex-end; padding: 43px 37px; height: 339px; width: 100%; position: relative; }
 .bio-band::after { content: ""; position: absolute; top: 0; left: 100%; width: 100vw; height: 100%; background: #000; z-index: -1; }
 .bio-title { margin: 0; font-weight: 700; font-size: 62px; letter-spacing: -0.06em; line-height: 1; }
 .bio__content { border-left: 2px solid #fff; padding-left: 0; display: flex; flex-direction: column; gap: 20px; }
 .bio-intro { margin: 0; color: #fff; font-weight: 300; letter-spacing: -0.06em; line-height: 40px; font-size: 36px; max-width: 710px; padding-left: 37px; }
 .bio-text { margin: 0; color: rgba(255,255,255,.73); letter-spacing: -0.06em; line-height: 30px; font-weight: 300; font-size: 23px; max-width: 710px; padding-left: 37px; }
 .bio-cta { display: inline-block; background: #000; color: #fff; padding: 12px 18px; border-radius: 24px; font-weight: 700; letter-spacing: .02em; text-decoration: none; margin-left: 37px; width: auto; max-width: fit-content; transition: all 0.3s ease; }
.bio-cta { border-radius: 20px; padding: 10px 39px; letter-spacing: -0.06em; line-height: 30px; font-weight: 500; }
.bio-cta:hover { background: #39ead7; color: #000; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(57, 234, 215, 0.4); }

 @media (max-width: 1024px) {
   .section-bio { padding: 64px 0; padding-top: 0; }
   .bio__inner { grid-template-columns: 1fr 1fr; gap: 28px; align-items: flex-start; }
   .bio-title { font-size: 44px; padding-left: 27px; }
   .bio-band { height: 250px; padding: 28px 24px 28px 0; width: calc(100% + 28px); margin-right: -28px; }
   .bio__content { max-width: none; padding-left: 0; margin-left: -100px; }
   .bio-intro { font-size: 28px; line-height: 36px; }
   .bio-text { font-size: 20px; line-height: 28px; }
   .bio__media img { width: 480px; height: auto; }
 }

@media (max-width: 768px) {
  .section-bio { padding: 0; }
  .section-bio::before { background-position: left top -140px; }
  .bio__inner { grid-template-columns: 1fr; gap: 0; width: 100%; }
  
  /* Reordenar elementos para móvil */
  .bio__content { order: 1; margin-left: 0; border-left: none; position: relative; z-index: 2; }
  .bio__media { order: 2; position: relative; z-index: 1; }
  
  /* Recuadro negro arriba - ocupa todo el ancho */
  .bio-band { 
    background: #000; 
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 40px 24px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  /* Desactivar el ::after en móvil para evitar scroll horizontal */
  .bio-band::after {
    display: none;
  }
  
  .bio-title { 
    font-size: 34px; 
    padding-left: 0;
  }
  
  /* Contenedor de textos con background */
  .bio-intro, .bio-text, .bio-cta { 
    padding-left: 24px; 
    padding-right: 24px;
  }
  
  .bio-intro { 
    font-size: 22px; 
    line-height: 30px;
    margin-top: 32px;
  }
  
  .bio-text { 
    font-size: 18px; 
    line-height: 26px; 
  }
  
  .bio-cta {
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 32px;
  }
  
  /* Imagen al final, cortada a la mitad */
  .bio__media { 
    margin: -100px 0 0 0;
    text-align: right;
    overflow: hidden;
    max-height: 300px;
    width: 100%;
  }
  
  .bio__media img { 
    width: 100%; 
    max-width: 400px;
    height: auto; 
    border-radius: 0;
    display: block;
    transform: scale(1.5);
    transform-origin: top right;
    margin-left: auto;
    margin-right: 0;
  }
}
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { position: relative; min-height: 250px; border-radius: 16px; padding: 18px; color: var(--white); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,0.3); transition: all 0.4s ease; cursor: pointer; }
.card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); z-index: 0; transition: background 0.4s ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
.card:hover::before { background: rgba(0,0,0,.15); }
.card-title, .card-text { position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform 0.4s ease; }
.card:hover .card-title, .card:hover .card-text { transform: translateY(-5px); }
.card-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.card-text { margin: 0; font-size: 14px; }

.card-1 { background: url("imgs/section1/ficha1.png"), url("imgs/section1/ficha1-back.jpg"); background-position: right top, center top; background-size: auto 70%, cover; background-repeat: no-repeat; }
.card-2 { background: url("imgs/section1/ficha2.png"), url("imgs/section1/ficha2-back.jpg"); background-position: right top, center top; background-size: auto 70%, cover; background-repeat: no-repeat; }
.card-3 { background: url("imgs/section1/ficha3.png"), url("imgs/section1/ficha3-back.jpg"); background-position: right top, center top; background-size: auto 70%, cover; background-repeat: no-repeat; }
.card-4 { background: url("imgs/section1/ficha4.png"), url("imgs/section1/ficha4-back.jpg"); background-position: right top, center top; background-size: auto 70%, cover; background-repeat: no-repeat; }

@media (max-width: 1024px) {
  .section-one { padding: 64px 0; }
  .cards { grid-template-columns: repeat(2, 1fr); margin-top: 120px; }
}

@media (max-width: 768px) {
  .section-one { padding: 48px 0; }
  .cards { grid-template-columns: 1fr; padding: 0 40px; }
  /* Fondo más pequeño en mobile para no recortar el rostro */
  .section-one::before { background-position: right top; background-size: contain; background-repeat: no-repeat; }
}

/* Desktop: 2 columnas fijas de 370px y centradas */
 @media (min-width: 1025px) {
   .cards { grid-template-columns: repeat(2, 370px); justify-content: start; gap: 24px; }
   .card { width: 370px; }
   /* Bio: fijar tamaño de la imagen; solo variar posición */
   .bio__media img { width: 560px; height: auto; }
   /* Mover ficha de información 100px a la izquierda */
   .bio__content { margin-left: -155px; }
 }

/* Desktop: pegar bio al top */
@media (min-width: 1025px) {
  .section-bio { padding-top: 0; }
  .bio__inner { align-items: flex-start; }
}

/* Desktop fijo: no escalar, +50px */
@media (min-width: 1025px) {
  .portrait { width: 570px; }
  .hero-media { left: calc(50% - 150px); }
  /* Desktop: foto por encima del texto */
  .hero-media { z-index: 2; }
  .hero-copy { z-index: 1; }
}

/* Section Work */
.section-work {
  background: #3F3F3F;
  color: #fff;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.section-work::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imgs/section-work/Background-work-silvia-espinoza.jpg") center center / cover no-repeat;
  opacity: 1;
  z-index: 0;
}

.work__inner {
  width: 50%;
  margin-left: auto;
  position: relative;
  z-index: 1;
  background: rgba(50, 167, 151, 0.7);
  padding: 60px 80px;
  text-align: left;
}

.work-title {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
}

.work-subtitle {
  margin: 0 0 40px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: #000;
}

.work-intro {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: #000;
}

.work-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  color: #fff;
}

/* Tablet */
@media (max-width: 1024px) {
  .section-work { min-height: 500px; }
  .work__inner { width: 55%; padding: 50px 60px; }
  .work-title { font-size: 40px; }
  .work-subtitle { font-size: 22px; margin-bottom: 32px; }
  .work-intro { font-size: 19px; }
  .work-text { font-size: 17px; }
}

/* Mobile */
@media (max-width: 768px) {
  .section-work { min-height: auto; padding: 48px 0; display: block; }
  .work__inner { width: 100%; margin: 0; padding: 40px 24px; }
  .work-title { font-size: 32px; margin-bottom: 20px; }
  .work-subtitle { font-size: 18px; margin-bottom: 28px; }
  .work-intro { font-size: 17px; margin-bottom: 20px; }
  .work-text { font-size: 16px; }
}

/* Section CTA */
.section-cta {
  background: #90604e;
  color: #fff;
  position: relative;
  padding: 150px 0;
}

.section-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("imgs/section-cta/Background-silvia-espinoza-cta.jpg") right top / cover no-repeat;
  opacity: 1;
  z-index: 0;
}

.cta__inner {
  width: min(600px, 92%);
  margin: 0 auto 0 10%;
  position: relative;
  z-index: 1;
  text-align: center;
}

.cta-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
}

.cta-subtitle {
  margin: 0 0 40px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color: #fff;
}

.cta-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.form-group {
  width: 100%;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-family: "Gotham", sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  outline: none;
  transition: all 0.3s ease;
}

.form-input::placeholder {
  color: #666;
}

.form-input:focus {
  border-color: #039381;
  background: #fff;
}

.btn-submit {
  width: 100%;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Gotham", sans-serif;
  background: #039381;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
}

.btn-submit:hover {
  background: #027a68;
}

.privacy-link {
  display: inline-block;
  color: #fff;
  text-decoration: underline;
  font-size: 14px;
  margin-top: 8px;
  transition: opacity 0.3s ease;
}

.privacy-link:hover {
  opacity: 0.8;
}

.form-message {
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.form-message.success {
  background: rgba(46, 213, 115, 0.15);
  border: 2px solid #2ed573;
  color: #fff;
}

.form-message.error {
  background: rgba(255, 71, 87, 0.15);
  border: 2px solid #ff4757;
  color: #fff;
}

/* Tablet */
@media (max-width: 1024px) {
  .section-cta { padding: 64px 0; }
  .cta__inner { width: min(510px, 77%); margin: 0 auto 0 10%; }
  .cta-title { font-size: 48px; }
  .cta-subtitle { font-size: 22px; margin-bottom: 36px; }
}

/* Mobile */
@media (max-width: 768px) {
  .section-cta { padding: 48px 0; }
  .section-cta::before { background-position: calc(100% + 100px) top; }
  .cta__inner { margin: 0 auto; }
  .cta-title { font-size: 36px; }
  .cta-subtitle { font-size: 18px; margin-bottom: 32px; }
  .form-input { padding: 14px 18px; font-size: 15px; }
  .btn-submit { padding: 14px 28px; font-size: 15px; }
}

/* ===== TESTIMONIALES SECTION ===== */
.section-testimoniales {
  padding: 80px 0;
  background: #ffffff;
  position: relative;
}

.testimoniales__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.testimoniales__header {
  text-align: center;
  margin-bottom: 60px;
}

.testimoniales-title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: #308D8D;
  margin: 0 0 24px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.testimoniales-subtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #2f2f2f;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.testimoniales__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

.testimonial-card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 400px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.testimonial-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.testimonial-1 {
  background-image: url('imgs/section-testimoniales/ficha1-back.jpg');
}

.testimonial-2 {
  background-image: url('imgs/section-testimoniales/ficha2-back.jpg');
}

.testimonial-3 {
  background-image: url('imgs/section-testimoniales/ficha3-back.jpg');
}

.testimonial-content {
  background: transparent;
  padding: 30px 24px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 0 0 20px 20px;
}

.testimonial-name {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.testimonial-text {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.6;
  margin: 0;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Tablet Testimoniales */
@media (max-width: 1024px) {
  .section-testimoniales { padding: 64px 0; }
  .testimoniales-title { font-size: 40px; }
  .testimoniales-subtitle { font-size: 16px; }
  .testimoniales__grid { gap: 32px; }
  .testimonial-card { min-height: 380px; }
  .testimonial-image { height: 180px; }
  .testimonial-content { padding: 24px 20px; }
  .testimonial-text { font-size: 14px; }
}

/* Mobile Testimoniales - Más específico */
@media screen and (max-width: 768px) {
  .section-testimoniales { 
    padding: 48px 0 !important; 
  }
  .testimoniales__inner { 
    padding: 0 16px !important; 
  }
  .testimoniales__header { 
    margin-bottom: 40px !important; 
  }
  .testimoniales-title { 
    font-size: 32px !important; 
    margin-bottom: 16px !important;
  }
  .testimoniales-subtitle { 
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .testimoniales__grid { 
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    display: grid !important;
  }
  .testimonial-card { 
    height: 400px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  .section-testimoniales .testimonial-1 {
    background-image: url('imgs/section-testimoniales/ficha1-back.jpg') !important;
  }
  .section-testimoniales .testimonial-2 {
    background-image: url('imgs/section-testimoniales/ficha2-back.jpg') !important;
  }
  .section-testimoniales .testimonial-3 {
    background-image: url('imgs/section-testimoniales/ficha3-back.jpg') !important;
  }
  .testimonial-content { 
    padding: 20px 16px !important; 
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: 0 0 20px 20px !important;
  }
  .testimonial-name { 
    font-size: 15px !important; 
    margin-bottom: 12px !important; 
  }
  .testimonial-text { 
    font-size: 14px !important; 
  }
}

/* ===== FOOTER SECTION ===== */
.site-footer {
  background-image: url('imgs/footer/background-06-silvia-espinoza.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 130px 0 40px;
  position: relative;
  color: #ffffff;
  overflow: hidden;
  margin: 0;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(48, 141, 141, 0.3);
  z-index: 1;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 10;
}

.footer__image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  transform: translateX(0);
}

.footer__portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  margin: 0;
  padding: 0;
  display: block;
  border: none;
}

.footer__content {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 60px;
  margin-bottom: 60px;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  align-items: end;
}

.footer__brand {
  max-width: 400px;
  position: relative;
  z-index: 10;
}

.footer__title {
  font-family: "BrittanySignature", cursive;
  font-size: 48px;
  color: #ffffff;
  margin: 0 0 20px 0;
  line-height: 1.1;
}

.footer__description {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 20px 0;
  opacity: 0.95;
}

.footer__subtitle {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

.contact__title,
.social__title {
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  margin: 0 0 24px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  z-index: 10;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact__label {
  font-family: "Gotham", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.contact__link,
.contact__text {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.contact__link:hover {
  opacity: 0.8;
}

.social__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social__link {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
  padding: 8px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.social__link:hover {
  opacity: 0.8;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer__copyright {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  margin: 0;
  opacity: 0.8;
}

.footer__legal {
  display: flex;
  gap: 32px;
}

.legal__link {
  font-family: "Gotham", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
  opacity: 0.8;
}

.legal__link:hover {
  opacity: 1;
}

/* Tablet Footer */
@media (max-width: 1024px) {
  .site-footer { 
    padding: 114px 0 32px;
    background-image: url('imgs/footer/background-06-silvia-espinoza.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .footer__content { 
    grid-template-columns: 1fr 1fr 2fr; 
    gap: 40px;
    margin-bottom: 48px;
    align-items: end;
  }
  .footer__brand { 
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: end;
  }
  .footer__contact {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .footer__social {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .footer__image {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 2;
  }
  
  .footer__portrait {
    width: 100%;
    height: 600px;
    object-fit: contain;
    object-position: left bottom;
    margin: 0;
    padding: 0;
    border: none;
  }
  .footer__title { font-size: 40px; }
  .footer__description { font-size: 15px; }
  .footer__subtitle { font-size: 16px; }
  .contact__title,
  .social__title { 
    font-size: 18px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .contact__label {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .contact__link,
  .contact__text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .social__link {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
}

/* Mobile Footer */
@media (max-width: 768px) {
  .site-footer { 
    padding: 98px 0 0;
    background-image: url('imgs/footer/background-06-silvia-espinoza.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .footer__inner { padding: 0; }
  .footer__image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 700px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 2;
  }
  .footer__portrait {
    width: 768px;
    min-width: 768px;
    height: 100%;
    object-position: left bottom;
    margin: 0;
    padding: 0;
    border: none;
  }
  .footer__content { 
    grid-template-columns: 1fr; 
    gap: 24px;
    margin-bottom: 720px;
    padding: 0 16px;
  }
  .footer__brand { 
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    order: 1;
    max-width: 100%;
    margin: 0 auto;
  }
  .footer__contact {
    grid-column: 1;
    grid-row: 2;
    order: 2;
    max-width: 100%;
    margin: 0 auto;
  }
  .footer__social {
    grid-column: 1;
    grid-row: 3;
    order: 3;
    max-width: 100%;
    margin: 0 auto;
  }
  .footer__title { 
    font-size: 36px; 
    margin-bottom: 16px;
  }
  .footer__description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .footer__subtitle { 
    font-size: 15px;
    line-height: 1.5;
  }
  .contact__title,
  .social__title { 
    font-size: 16px; 
    margin-bottom: 16px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .contact__info,
  .social__links { 
    align-items: center; 
  }
  .contact__item { 
    text-align: center; 
  }
  .contact__label,
  .contact__link,
  .contact__text,
  .social__link {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .footer__bottom { 
    position: relative;
    flex-direction: column; 
    text-align: center;
    gap: 8px;
    padding: 20px 16px;
    z-index: 30;
  }
  .footer__legal { 
    flex-direction: column; 
    gap: 8px;
  }
}