/* =========================================================================
   MANTO BRANDING STUDIO 
   Variables CSS optimizadas para layouts fluidos responsive
   ========================================================================= */

/* VARIABLES COLORES EXACTOS */
:root {
  --color-fondo-principal: #F8F5F2;      /* Beige claro principal */
  --color-fondo-hero: #F0EDE7;           /* Beige del hero */
  --color-texto-principal: #2C2C2C;      /* Gris oscuro textos */
  --color-texto-secundario: #6B5B47;     /* Marrón para subtextos */
  --color-acento-principal: #B99269;     /* Dorado/beige medio */
  --color-acento-secundario: #D4A574;    /* Dorado claro */
  --color-rojo-acento: #C4342D;          /* Rojo de "+70" y botones */
  --color-negro-seccion: #000000;        /* Negro sólido */
  --color-beige-oscuro: #E8DDCD;         /* Beige oscuro para fondos */
  --color-beige-transparente: #E8DDCD61; /* FAQ transparente */
  --color-blanco: #FFFFFF;               /* Blanco puro */
  --color-gris-claro: #F5F5F5;           /* Gris FAQ */
  
  /* VARIABLES LAYOUT FLUIDO SISTEMÁTICO */
  --container-max: min(90%, 1200px);
  --container-wide: min(95%, 1400px);
  --container-mobile: min(90%, 800px);
  --gap-section: clamp(1.5rem, 4vw, 3rem);
  --gap-internal: clamp(1rem, 2vw, 2rem);
  --padding-section: clamp(2rem, 6vh, 6rem);
  --padding-lateral: clamp(1rem, 3vw, 3rem);
  --breakpoint-main: 840px;
  
  /* VARIABLES TIPOGRAFÍA ESCALABLE */
  --font-title-main: clamp(2.5rem, 5vw, 4rem);
  --font-title-post: clamp(3rem, 6vw, 3.5rem);
  --font-subtitle-main: clamp(1.2rem, 2.4vw, 1.8rem);
  --font-subtitle-post: clamp(1.4rem, 3vw, 2rem);
  --font-content-main: clamp(1rem, 1.8vw, 1.25rem);
  --font-content-post: clamp(1.1rem, 2.2vw, 1.3rem);
  
  /* VARIABLES CTA SISTEMÁTICO */
  --cta-font-main: clamp(16px, 2vw, 24px);
  --cta-font-post: clamp(18px, 3vw, 22px);
  --cta-padding-main: clamp(10px, 1.5vh, 16px) clamp(20px, 3vw, 32px);
  --cta-padding-post: clamp(12px, 2vh, 18px) clamp(24px, 4vw, 36px);
}

/* FUENTES PERSONALIZADAS COMPLETAS */
@font-face {
  font-family: 'AGaramondPro Regular';
  src: url('assets/fonts/AGaramondPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional; /* Menos crítica - solo carga si es rápida */
}

@font-face {
  font-family: 'AGaramondPro Italic';
  src: url('assets/fonts/AGaramondPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: fallback; /* Mejora performance inicial */
  /* Propiedades específicas móvil */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato Light';
  src: url('assets/fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: fallback; /* Crítica - pero con timeout corto */
}

@font-face {
  font-family: 'Lato Light Italic';
  src: url('assets/fonts/Lato-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: optional; /* Menos crítica */
}

@font-face {
  font-family: 'The Castelo';
  src: url('assets/fonts/The-Castelo.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional; /* Decorativa - solo si carga rápido */
}

@font-face {
  font-family: 'The Castelo Bold';
  src: url('assets/fonts/The-Castelo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: optional; /* Decorativa - solo si carga rápido */
}

/* RESET GLOBAL OPTIMIZADO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CONFIGURACIONES BASE LAYOUT FLUIDO */
body {
  font-family: "Lato Light", sans-serif !important;
  color: var(--color-texto-principal);
  background-color: var(--color-fondo-principal);
  line-height: 1.6;
  overflow-x: hidden;
}

/* CONTENEDORES RESPONSIVE SISTEMA UNIFICADO */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}

.container-wide {
  max-width: var(--container-wide);
  width: 90%;
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}

/* SISTEMA TIPOGRAFÍA ESCALABLE UNIFICADO */
.section-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: var(--font-title-main);
  line-height: 1.3;
  margin: 0 auto var(--gap-section) auto;
  text-align: center;
}

.section-subtitle {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: var(--font-subtitle-main);
  line-height: 1.6;
}

.content-text {
  font-family: "Lato Light", sans-serif !important;
  font-size: var(--font-content-main);
  line-height: 1.5;
}

/* SISTEMA CTA UNIFICADO BASE */
.cta-base {
  font-family: "Lato Light", sans-serif !important;
  font-size: var(--cta-font-main);
  font-weight: 500;
  padding: var(--cta-padding-main);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* ANIMACIONES GLOBALES */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* UTILIDADES GLOBALES */
.text-center { text-align: center; }
.text-left { text-align: left; }
.italic-red { 
  color: var(--color-rojo-acento); 
  font-style: italic;
  text-shadow: none !important;
}
.italic-gold { 
  color: var(--color-acento-principal); 
  font-style: italic;
  text-shadow: none !important;
}

/* RESPONSIVE BREAKPOINT PRINCIPAL 840px */
@media (max-width: 840px) {
  .container {
    max-width: var(--container-mobile);
    padding: 0 clamp(0.5rem, 2vw, 2rem);
  }
  
  .container-wide {
    max-width: var(--container-mobile);
    width: 90%;
    padding: 0 clamp(0.5rem, 2vw, 2rem);
  }
  
  /* TIPOGRAFÍA POST-BREAKPOINT INCREMENTADA */
  .section-title {
    font-size: var(--font-title-post);
  }
  
  .section-subtitle {
    font-size: var(--font-subtitle-post);
  }
  
  .content-text {
    font-size: var(--font-content-post);
  }
  
  /* CTA POST-BREAKPOINT INCREMENTADOS */
  .cta-base {
    font-size: var(--cta-font-post);
    padding: var(--cta-padding-post);
  }
  
  /* FORZAR TODAS LAS FUENTES PROBLEMÁTICAS MÓVIL */
  
  /* AGaramondPro Italic - Títulos principales */
  .construimos, .marcas, .con-sentido, .marcas-emocionantes,
  .section-title, .maria-title, .final-title, .metodologia-title, 
  .metodologia-subtitle, .brand-explanation-question, .overlay h2,
  .empiezo-title, .empiezo-subtitle, .consultation-main, .consultation-description {
    font-family: "AGaramondPro Italic", "Times New Roman", Georgia, serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    text-shadow: none !important;
  }
  
  /* AGaramondPro Regular - Textos específicos */
  .brand-explanation-highlight {
    font-family: "AGaramondPro Regular", "Times New Roman", Georgia, serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
  }
  
  /* Lato Light - Textos base y CTAs */
  body, .content-text, .cta-base, .cta-button, .cta-button-dark,
  .cta-button-red, .cta-button-green, .benefits-list li,
  .brand-explanation-text, .brand-explanation-italic,
  .empiezo-description, .empiezo-highlight, .empiezo-value,
  .testimonio-texto, .faq-question-text, .faq-answer,
  .maria-description, .maria-additional, .footer-text {
    font-family: "Lato Light", "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  
  /* The Castelo - Elementos específicos */
  .special-font, .decorative-text {
    font-family: "The Castelo", "Times New Roman", serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  
/* REFUERZO CURSIVAS ROJAS/DORADAS SIN TEXT-SHADOW */
  .italic-red, .italic-gold, .marcas-emocionantes {
    font-weight: 600 !important;
    text-shadow: none !important;
    -webkit-font-feature-settings: "kern" 1 !important;
    font-feature-settings: "kern" 1 !important;
  }
  
  /* FORZAR RECARGA FUENTES SI FALLAN */
  * {
    font-synthesis: weight style !important;
    font-variant-ligatures: common-ligatures !important;
  }
}






/* =========================================================================
   BARRA INICIAL - ISOTIPO M SUPERIOR
   Sección negra superior con isotipo responsive
   ========================================================================= */

.isotipo-section {
  background-color: var(--color-negro-seccion);
  padding: clamp(0.3vh, 0.5vh, 0.8vh) 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.isotipo-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: var(--padding-lateral);
}

.isotipo-image {
  width: clamp(2.5%, 3vw, 4.5%);
  height: auto;
  min-width: clamp(25px, 4vw, 35px);
  max-width: clamp(60px, 6vw, 80px);
  transition: transform 0.3s ease;
}

.isotipo-image:hover {
  transform: scale(1.05);
}

/* RESPONSIVE BREAKPOINT 840px */
@media (max-width: 840px) {
  .isotipo-section {
    padding: clamp(0.4vh, 0.6vh, 0.8vh) 0;
  }
  
  .isotipo-container {
    padding-right: clamp(0.5rem, 2vw, 2rem);
  }
  
  .isotipo-image {
    width: clamp(3%, 4vw, 5%);
    min-width: clamp(30px, 5vw, 40px);
    max-width: clamp(50px, 7vw, 70px);
  }
}






/* =========================================================================
   SECCIÓN HERO -
   Diseño 2 columnas responsive con breakpoint inteligente 840px
   ========================================================================= */

.hero-section {
  background-color: var(--color-fondo-hero);
  background-image: url('assets/images/06/Fondo-Hero-Mantobrandingstudio.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--padding-section) 0;
  min-height: clamp(60vh, 80vh, 90vh);
  width: 100%;
}

.hero-container {
  max-width: var(--container-wide);
  width: 90%;
  margin: 0 auto;
  padding: var(--padding-lateral);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--gap-section);
}

.hero-left {
  width: clamp(55%, 60%, 65%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: clamp(1rem, 5vw, 7rem);
  padding-bottom: var(--gap-internal);
}

.hero-right {
  width: clamp(35%, 40%, 45%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOGO MARCA */
.brand-logo {
  max-width: clamp(100px, 12vw, 180px);
  height: auto;
  margin-bottom: clamp(15px, 2vh, 30px);
}

/* TIPOGRAFÍA PRINCIPAL ESCALABLE */
.hero-main-text {
  margin-bottom: 0;
}

.construimos {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-texto-principal);
  text-align: left;
  margin: 0;
}

.marcas, .con-sentido {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 0.9;
  color: var(--color-texto-principal);
  text-align: left;
  margin: 0;
}

.marcas-emocionantes {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-rojo-acento);
  text-align: left;
  margin: 0;
}

/* CTA BOTÓN PRINCIPAL */
.cta-button {
  background-color: var(--color-acento-principal);
  color: var(--color-blanco);
  border-bottom: 4px solid #8A6B4A;
  font-family: "Lato Light", sans-serif !important;
  font-size: var(--cta-font-main);
  font-weight: 500;
  padding: var(--cta-padding-main);
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.cta-button-container {
  padding: var(--gap-internal) 0;
  margin: 0;
}

.cta-button:hover {
  background-color: #A08458;
  border-bottom: 4px solid #7A5C3E;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

.cta-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #8A6B4A;
}

/* TEXTOS DESCRIPTIVOS */
.consultation-text {
  margin-top: 0;
  margin-bottom: var(--gap-internal);
}

.consultation-description {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--color-texto-principal);
  line-height: 1.4;
  margin-bottom: var(--gap-internal);
}

.consultation-main {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-rojo-acento);
  text-align: left;
  margin: 0;
}

.consultation-detail {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-texto-principal);
  text-align: left;
  margin: 0;
}

/* TEXTO CLARIDAD FULL WIDTH */
.clarity-text {
  font-family: "The Castelo", serif !important;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 500;
  font-style: italic;
  color: #2A4440;
  text-align: center;
  line-height: 1.3;
  margin: 0;
margin-top: clamp(0.5rem, 1vh, 1rem);
  padding: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* IMAGEN HERO */
.hero-photo {
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}

/* BREAKPOINT INTELIGENTE 840px - CAMBIO ESTRUCTURAL */
@media (max-width: 840px) {
  .hero-container {
    flex-direction: column;
    gap: var(--gap-internal);
    padding: clamp(1rem, 3vw, 2rem);
  }
  
  .hero-left {
    width: 100%;
    padding-right: 0;
    padding-bottom: var(--gap-internal);
    order: 1;
    text-align: center;
  }
  
  .hero-right {
    width: 100%;
    order: 2;
    justify-content: center;
  }
  
  /* LOGO MÁS GRANDE POST-BREAKPOINT */
  .brand-logo {
  max-width: clamp(140px, 15vw, 200px);
  margin: 0 auto clamp(25px, 4vh, 40px) 0; 
  display: block;
  margin-left: clamp(0.8rem, 2.5vw, 1.6rem); 
}

  /* TIPOGRAFÍA POST-BREAKPOINT INCREMENTADA */
  .construimos {
   font-size: clamp(3.2rem, 6vw, 4.8rem); 
    text-align: left;
    margin-left: clamp(1rem, 3vw, 2rem); 
  }

  .marcas, .con-sentido {
    font-size: clamp(4rem, 8vw, 6.5rem); 
    text-align: left;
    margin-left: clamp(1rem, 3vw, 2rem);
  }

  .marcas-emocionantes {
   font-size: clamp(3.2rem, 6vw, 4.8rem); 
   text-align: left;
   margin-left: clamp(1rem, 3vw, 2rem); 
  }
  
  /* TEXTOS CENTRADOS POST-BREAKPOINT */
  .consultation-main,
  .consultation-detail {
    text-align: left;
    font-size: clamp(20px, 3vw, 24px); 
  }
  
  .consultation-description {
    text-align: left;
    font-size: clamp(20px, 3vw, 30px); 
  }
  
  /* CTA POST-BREAKPOINT */
  .cta-button {
    font-size: var(--cta-font-post);
    padding: var(--cta-padding-post);
    margin: var(--gap-internal) auto;
    display: block;
    width: fit-content;
  }
  
 
  /* IMAGEN RESPONSIVE */
  .hero-photo {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
  
  /* TEXTO CLARIDAD OPTIMIZADO */
  .clarity-text {
    font-size: clamp(28px, 5vw, 38px); 
    margin-top: var(--gap-section);
  }
}






/* =========================================================================
   SECCIÓN ¿QUÉ OBTENDRÁS? 
   Grid de beneficios responsive con breakpoint inteligente
   ========================================================================= */

.que-obtendras {
  background-color: var(--color-blanco);
  padding: var(--padding-section) 0;
  width: 100%;
}

.que-obtendras .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}

.que-obtendras .section-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: var(--font-title-main);
  font-weight: 400;
  font-style: italic;
  color: #2A4440;
  text-align: left;
  margin-bottom: var(--gap-section);
  line-height: 1.3;
}

/* GRID DE BENEFICIOS FLUIDO */
.benefits-grid {
  display: flex;
  flex-direction: row;
  gap: clamp(3rem, 6vw, 6rem);
  margin-bottom: 0;
  padding: 0;
  align-items: flex-start;
}

.benefits-left,
.benefits-right {
  width: clamp(48%, 50%, 52%);
  flex: 1;
  padding: 0;
}

/* LISTAS DE BENEFICIOS */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 300;
  color: var(--color-texto-principal);
  margin-bottom: clamp(12px, 1.5vh, 20px);
  line-height: 1.5;
  position: relative;
  padding-left: clamp(25px, 3vw, 35px);
}

.benefits-list li:before {
  content: "•";
  color: var(--color-rojo-acento);
  font-size: clamp(24px, 3vw, 36px);
  position: absolute;
  left: 0;
  top: clamp(-3px, -0.5vh, -6px);
  line-height: 1;
  font-weight: bold;
}

/* TEXTO DESTACADO */
.highlight-text {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 500;
  color: var(--color-rojo-acento);
  font-style: italic;
  margin-top: var(--gap-internal);
  margin-bottom: 0;
  line-height: 1.2;
}

.italic-red {
  color: var(--color-rojo-acento);
  font-style: italic;
}

/* BREAKPOINT INTELIGENTE 840px - CAMBIO A COLUMNA ÚNICA */
@media (max-width: 840px) {
.que-obtendras {
  padding: clamp(1.5rem, 4vh, 2.5rem) 0; 
  margin-top: clamp(0rem, -1vh, 0.5rem); 
}
  .que-obtendras .container {
    max-width: var(--container-mobile);
    padding: 0 clamp(0.5rem, 2vw, 2rem);
  }
  
.que-obtendras .section-title {
  font-size: clamp(2.5rem, 4.5vw, 3rem); 
  text-align: center;
  margin-bottom: clamp(1rem, 2vh, 1.5rem); 
}
  
  /* CAMBIO ESTRUCTURAL - DE 2 COLUMNAS A 1 COLUMNA */
  .benefits-grid {
    flex-direction: column;
    gap: clamp(0rem, 0.5vw, 0.5rem);
    max-width: min(95%, 700px);
    margin: 0 auto;
  }
  
  .benefits-left,
  .benefits-right {
    width: 100%;
    text-align: left;
  }
  
  /* TEXTOS INCREMENTADOS POST-BREAKPOINT */
  .benefits-list li {
    font-size: clamp(18px, 2.5vw, 22px); 
    line-height: 1.4;
    text-align: left;
    padding-left: clamp(30px, 4vw, 40px);
    margin-bottom: clamp(8px, 1vh, 12px);
  }
  
  .benefits-list li:before {
    font-size: clamp(28px, 4vw, 38px); 
    left: clamp(2px, 1vw, 5px);
  }
  
  .highlight-text {
    font-size: clamp(22px, 3.5vw, 28px); 
    text-align: center;
    margin-top: clamp(1.5rem, 3vh, 2rem);
  }
}






/* =========================================================================
   SECCIÓN DIFERENCIAS DE MARCA 
   Layout 2 columnas con breakpoint inteligente 840px
   ========================================================================= */

.brand-explanation-section {
  background-color: #F9F5F2;
  padding: var(--padding-section) 0;
  width: 100%;
}

.brand-explanation-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
  display: flex;
  flex-direction: row;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
}

.brand-explanation-left {
  width: clamp(48%, 50%, 52%);
  padding-right: clamp(2rem, 4vw, 4rem);
}

.brand-explanation-left img {
  width: clamp(50px, 12vw, 100px) !important;
  max-width: none !important;
  height: auto;
  margin-bottom: clamp(1.5rem, 2vh, 2rem);
}

.brand-explanation-question {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-texto-principal);
  text-align: left;
  margin-bottom: 0;
}

.brand-explanation-highlight {
  font-family: "AGaramondPro Regular", serif !important;
  font-size: clamp(32px, 5vw, 55px);
  font-weight: 600;
  line-height: 0.9;
  color: var(--color-rojo-acento);
  text-align: left;
  margin: 0;
}

.brand-explanation-right {
  width: clamp(48%, 50%, 52%);
}

.brand-explanation-text {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--color-texto-principal);
  line-height: 1.6;
  margin-bottom: clamp(12px, 1vh, 15px);
  text-align: left;
}

.brand-explanation-italic {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-acento-principal);
  font-style: italic;
  margin: clamp(1.4rem, 1.8vh, 1.7rem) 0; 
  text-align: left;
}

/* BREAKPOINT INTELIGENTE 840px - CAMBIO A COLUMNA VERTICAL */
@media (max-width: 840px) {
  .brand-explanation-container {
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
    max-width: var(--container-mobile);
    align-items: center;
  }
  
  .brand-explanation-left {
    width: 100%;
    padding-right: 0;
    text-align: center;
    margin-bottom: var(--gap-internal);
  }
  
  .brand-explanation-left img {
    margin: 0 auto clamp(1.5rem, 4vw, 2rem) auto;
    display: block;
  }
  
  /* TIPOGRAFÍA INCREMENTADA POST-BREAKPOINT */
  .brand-explanation-question {
    font-size: clamp(36px, 6vw, 50px); 
    text-align: center;
  }
  
  .brand-explanation-highlight {
    font-size: clamp(38px, 6.5vw, 55px); 
    text-align: center;
  }
  
  .brand-explanation-right {
    width: 100%;
  }
  
  .brand-explanation-text {
    font-size: clamp(22px, 3vw, 24px); 
    line-height: 1.4;
    text-align: center;
  }
  
  .brand-explanation-italic {
    font-size: clamp(26px, 3.5vw, 28px);
    line-height: 1.2;
    text-align: center;
    margin: clamp(1.6rem, 2.2vh, 2rem) 0; 
  }
}






/* =========================================================================
   SECCIÓN ¿CÓMO CONSEGUIRLO? - LAYOUT FLUIDO OPTIMIZADO
   Sección con imagen de fondo e invasión controlada
   ========================================================================= */

.como-conseguirlo {
  margin-top: clamp(-80px, -4vh, -40px);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max);
  width: clamp(75%, 80%, 85%);
  padding: 0;
  position: relative;
}

.como-conseguirlo-inner {
  background-image: url('assets/images/06/Foto-Como-Conseguirlo-Mantobrandingstudio.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: clamp(180px, 18vh, 220px);
 padding: clamp(0.5rem, 2vw, 2rem) var(--padding-lateral);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

/* OVERLAY CONTENIDO */
.overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: clamp(40%, 50%, 60%);
  gap: clamp(0.5rem, 2vh, 2rem);
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}


.overlay h2 {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-texto-principal);
  margin: 0;
}

/* CTA BOTÓN OSCURO */
.cta-button-dark {
  background-color: var(--color-texto-principal);
  color: var(--color-blanco);
  border-bottom: 4px solid var(--color-negro-seccion);
  font-family: "Lato Light", sans-serif !important;
  font-size: var(--cta-font-main);
  font-weight: 500;
  padding: var(--cta-padding-main);
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.cta-button-dark:hover {
  background-color: #333333;
  color: var(--color-blanco);
  border-bottom: 4px solid #111111;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

.cta-button-dark:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid var(--color-negro-seccion);
}

/* TAGLINE */
.tagline {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(18px, 2.5vw, 25px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-texto-principal);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* BREAKPOINT INTELIGENTE 840px - CENTRADO SOBRE IMAGEN */
@media (max-width: 840px) {
  .como-conseguirlo {
    margin-top: clamp(-40px, -3vh, -25px); 
    max-width: var(--container-mobile);
    width: 90%;
  }
  
  .como-conseguirlo-inner {
    justify-content: center; 
    background-size: cover;
    min-height: clamp(150px, 20vh, 200px);
    padding: var(--gap-internal);
  }
  
  .overlay {
    width: clamp(95%, 95%, 95%);
    gap: clamp(1rem, 3vh, 2rem);
    background-color: transparent;
padding: clamp(1rem, 3vw, 1.8rem); 
    border-radius: 2px;
  }
  
  /* TIPOGRAFÍA INCREMENTADA POST-BREAKPOINT */
  .overlay h2 {
    font-size: clamp(32px, 6vw, 45px); 
  }
  
.cta-button-dark {
  font-size: clamp(16px, 2.8vw, 20px); 
  padding: clamp(10px, 1.8vh, 14px) clamp(20px, 3.5vw, 28px); 
}
  
.tagline {
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.2;
}
}









/* =========================================================================
   SECCIÓN GRID DE MARCAS 
   Grid responsive con invasión controlada y progresión coherente
   ========================================================================= */

.marcas-grid {
  background-color: var(--color-blanco);
  width: 100%;
  margin-top: clamp(-120px, -10vh, -100px); /* INVASIÓN REDUCIDA */
  padding-top: clamp(140px, 15vh, 200px);
  padding-bottom: var(--padding-section);
  padding-left: 0;
  padding-right: 0;
}

.marcas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--padding-lateral);
  max-width: var(--container-max);
  width: clamp(75%, 80%, 85%);
  margin: 0 auto;
}

.marcas-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* HEADER +70 MARCAS CON DESBORDAMIENTO CONTROLADO */
.marcas-header {
  text-align: center;
margin-bottom: clamp(0.5rem, 1vh, 0.7rem);
  width: 100%;
  display: flex;
  justify-content: center;
}

.marcas-header img {
  display: inline-block;
  vertical-align: middle;
  width: clamp(450px, 80%, 80%);
  min-width: 450px !important;
  height: auto;
}

/* GRID DE LOGOS RESPONSIVE - BASE 4 COLUMNAS */
.marcas-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.5vw, 20px);
  width: 100%;
  justify-items: center;
  align-items: center;
}

.marcas-logos img {
  width: 100%;
  max-width: 220px;
  min-width: 80px;
  height: auto;
  padding: clamp(0.3rem, 0.8vh, 0.6rem);
  border: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.marcas-logos img:hover {
  transform: scale(1.05);
}

/* LOGOS ESPECÍFICOS CON TAMAÑOS AJUSTADOS */
.marcas-logos img[alt="La Pollera"],
.marcas-logos img[alt="Q'ponque"],
.marcas-logos img[alt="Burning"] {
  max-width: 250px;
  padding: clamp(0.2rem, 0.5vh, 0.4rem);
}

.marcas-logos img[alt="Terra"] {
  max-width: 280px;
  padding: clamp(0.1rem, 0.3vh, 0.3rem);
}

.marcas-logos img[alt="El Clip"] {
  max-width: 180px;
  padding: clamp(0.4rem, 1vh, 0.8rem);
}

/* CTA BOTÓN ROJO UNIFICADO */
.cta-button-red {
  background-color: var(--color-rojo-acento);
  color: var(--color-blanco);
  border-bottom: 4px solid #992200;
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  padding: var(--cta-padding-main);
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  line-height: 1;
  margin-top: var(--gap-section);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.cta-button-red:hover {
  background-color: #AA2200;
  color: var(--color-blanco);
  border-bottom: 4px solid #771100;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

.cta-button-red:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #992200;
}

.cta-button-red:focus,
.cta-button-red:visited {
  color: var(--color-blanco);
  text-decoration: none !important;
}

/* BREAKPOINT INTERMEDIO 1024px - 3 COLUMNAS */
@media (max-width: 1024px) {
  .marcas-logos {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .marcas-logos img {
    max-width: 200px; 
    min-width: 80px;
  }
  
  .marcas-logos img[alt="La Pollera"],
  .marcas-logos img[alt="Q'ponque"],
  .marcas-logos img[alt="Burning"] {
    max-width: 220px;
  }
  
  .marcas-logos img[alt="Terra"] {
    max-width: 240px;
  }
  
  .marcas-logos img[alt="El Clip"] {
    max-width: 170px;
  }
}

/* BREAKPOINT PRINCIPAL 840px - CAMBIO ESTRUCTURAL A 2 COLUMNAS */
@media (max-width: 840px) {
  .marcas-grid {
    margin-top: clamp(-80px, -6vh, -60px); 
    padding-top: clamp(100px, 12vh, 140px);
  }
  
  .marcas-container {
    max-width: var(--container-mobile);
    width: 90%;
    padding: 0 clamp(0.5rem, 2vw, 2rem);
  }
  
  /* HEADER DESBORDANTE PARA +70 MARCAS */
  .marcas-header {
    overflow: visible;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  
  .marcas-header img {
    width: clamp(280px, 100%, 460px);
    min-width: 280px !important;
    max-width: 460px;
    height: auto;
  }
  
  /* GRID 2 COLUMNAS CON TAMAÑOS INCREMENTADOS */
  .marcas-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 20px);
    max-width: min(95%, 600px);
    margin: 0 auto;
  }
  
  .marcas-logos img {
    width: 100%;
    max-width: 170px; 
    min-width: 100px;
    height: auto;
    object-fit: contain;
    padding: clamp(0.2rem, 0.6vh, 0.5rem);
  }
  
  .marcas-logos img[alt="La Pollera"],
  .marcas-logos img[alt="Q'ponque"],
  .marcas-logos img[alt="Burning"] {
    max-width: 190px; 
  }
  
  .marcas-logos img[alt="Terra"] {
    max-width: 200px; 
  }
  
  .marcas-logos img[alt="El Clip"] {
    max-width: 150px; 
  }
  
.cta-button-red {
  font-size: clamp(18px, 2.5vw, 22px); 
  padding: var(--cta-padding-main); 
  margin-top: clamp(2rem, 5vh, 3rem);
}
}







/* =========================================================================
   SECCIÓN NEGRA METODOLOGÍA - LAYOUT FLUIDO OPTIMIZADO
   Sección con fondo negro y tipografía escalable
   ========================================================================= */

.metodologia-negra {
  background-color: var(--color-negro-seccion);
  padding: clamp(4rem, 10vh, 12rem) clamp(1rem, 3vw, 3rem);
  text-align: center;
  width: 100%;
}

.metodologia-negra .container {
  max-width: min(95%, 1400px);
  width: 90%;
  padding: 0 clamp(1rem, 2vw, 2rem);
}

.metodologia-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(2rem, 4vw, 3.2rem); 
  font-weight: 400;
  color: var(--color-acento-principal);
  line-height: 1.3;
  margin: 0 auto clamp(0.8rem, 1.6vh, 1.6rem) auto;
  max-width: min(90%, 1000px);
  text-align: center;
}

.metodologia-subtitle {
  font-family: "AGaramondPro Italic", serif !important;
  color: var(--color-blanco);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); 
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
  max-width: min(100%, 1200px);
  padding: 0;
  display: block;
}

.metodologia-subtitle strong {
  color: var(--color-blanco);
  font-weight: 600;
}

.white-text {
  color: var(--color-blanco);
}

/* BREAKPOINT 840px */
@media (max-width: 840px) {
  .metodologia-title {
    font-size: clamp(2.3rem, 4.8vw, 3.4rem);
    margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
  }
  
  .metodologia-subtitle {
    font-size: clamp(1.35rem, 2.8vw, 2rem); 
    line-height: 1.55;
  }
}






/* =========================================================================
   SECCIÓN ¿CÓMO FUNCIONA? 
   Grid horizontal que cambia a vertical con breakpoint inteligente
   ========================================================================= */

.como-funciona {
  background-color: var(--color-blanco);
  padding: var(--padding-section) 0;
  width: 100%;
}

.como-funciona .container {
  max-width: var(--container-max);
  width: 85%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.como-funciona .section-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: var(--font-title-main);
  font-weight: 400;
  color: var(--color-acento-principal);
  text-align: center;
  margin: 0 auto var(--gap-section) auto;
  line-height: 1.3;
  padding: 0;
}

/* GRID HORIZONTAL BASE */
.pasos-grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--gap-section);
margin: 0 auto clamp(1rem, 3vh, 2rem) auto; /* SOLO EN RESPONSIVE */
  max-width: var(--container-max);
  padding: 0 var(--padding-lateral);
  height: auto;
}

.paso {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  flex: 1;
  min-height: clamp(6rem, 12vh, 8rem);
}

.paso-numero {
  font-family: "The Castelo", serif !important;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 600;
  color: var(--color-negro-seccion);
  margin-right: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.1;
  min-width: clamp(3rem, 5vw, 4rem);
  text-align: right;
}

.paso-numero::after {
  content: ".";
  color: var(--color-rojo-acento);
}

.paso-content {
  flex: 1;
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--color-negro-seccion);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.paso-content p {
  font-family: "Lato Light", sans-serif !important;
  font-weight: 350;
  font-size: var(--font-content-main);
  color: var(--color-texto-principal);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

/* BREAKPOINT INTELIGENTE 840px - CAMBIO A VERTICAL */
@media (max-width: 840px) {
  .como-funciona {
    padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  }
  
  .como-funciona .container {
    max-width: var(--container-mobile);
    width: 90%;
  }
  
  .como-funciona .section-title {
    font-size: var(--font-title-post);
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
  }
  
  .pasos-grid {
  margin-bottom: clamp(-0.5rem, 0.5vh, 0rem); /* MARGEN INFERIOR REDUCIDO */
}
  /* CAMBIO ESTRUCTURAL - GRID VERTICAL CON ALTURAS IGUALES */
  .pasos-grid {
    display: grid;
    grid-template-rows: repeat(3, minmax(140px, auto));
    gap: 0;
    max-width: min(95%, 700px);
    padding: 0 clamp(0.5rem, 1.5vw, 1rem);
  }
  
  .paso {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: clamp(18px, 4vw, 20px) 0;
    border-bottom: 1px solid var(--color-beige-oscuro);
    box-sizing: border-box;
    min-height: clamp(120px, 15vh, 150px);
  }
  
  .paso:last-child {
    border-bottom: none;
  }
  
  /* NÚMEROS POST-BREAKPOINT */
  .paso-numero {
    font-size: clamp(4rem, 8vw, 4.5rem); 
    min-width: clamp(4rem, 8vw, 4.5rem);
    margin-right: clamp(0.8rem, 2.5vw, 1.2rem);
    flex-shrink: 0;
    text-align: center;
  }
  
  /* AJUSTE ESPECÍFICO PARA EL NÚMERO 1 */
  .paso:first-child .paso-numero {
    margin-left: -0.3rem;
  }
  
  .paso-content {
    padding-left: clamp(0.8rem, 2.5vw, 1.2rem);
    flex: 1;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto;
    border-left: none;
  }
  
  /* TEXTOS POST-BREAKPOINT */
  .paso-content p {
    font-size: var(--font-content-post); 
    line-height: 1.4;
    margin: 0;
    width: 100%;
    text-align: justify;
  }
}







/* =========================================================================
   SECCIÓN RESULTADO FINAL 
   Texto centrado con destacado dorado escalable
   ========================================================================= */

.final-result {
  background-color: #F9F5F2;
  padding: var(--padding-section) 0;
  width: 100%;
}

.final-result .container {
  max-width: var(--container-max);
  width: 75%;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--padding-lateral);
}

.final-result p {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 300;
  color: var(--color-texto-principal);
  margin-bottom: clamp(12px, 1.5vh, 18px);
  line-height: 1.6;
  text-align: center;
  max-width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
}

.final-result .highlight-gold {
  font-family: "AGaramondPro Regular", serif !important;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-acento-principal) !important;
  text-align: center;
  margin-bottom: clamp(12px, 1.5vh, 18px);
  max-width: min(100%, 800px);
  margin-left: auto;
  margin-right: auto;
}

/* BREAKPOINT INTELIGENTE 840px */
@media (max-width: 840px) {
  .final-result {
    padding: clamp(2rem, 6vh, 4rem) 0;
  }
  
  .final-result .container {
    max-width: var(--container-mobile);
    width: 90%;
    padding: 0 clamp(0.5rem, 2vw, 2rem);
  }
  
  /* TIPOGRAFÍA  POST-BREAKPOINT */
  .final-result p {
    font-size: clamp(20px, 2.2vw, 24px); 
    line-height: 1.5;
    margin-bottom: clamp(15px, 2vh, 20px);
  }
  
  .final-result .highlight-gold {
    font-size: clamp(24px, 2.8vw, 30px); 
    line-height: 1.3;
    margin-bottom: clamp(15px, 2vh, 20px);
  }
}








/* =========================================================================
   SECCIÓN ¿CÓMO EMPIEZO? 
   Layout 2 columnas con invasión controlada y breakpoint inteligente
   ========================================================================= */

.como-empiezo {
  background-color: var(--color-blanco);
  padding: 0;
  position: relative;
  margin: 0;
}

.como-empiezo .container {
  max-width: var(--container-max);
  width: 80%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}

.empiezo-content {
  display: flex;
  flex-direction: row;
  align-items: center; 
  justify-content: center;
  gap: clamp(4rem, 8vw, 6rem);
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--padding-lateral);
  margin: clamp(3rem, 6vh, 5rem) auto 0 auto;
}

/* COLUMNA IZQUIERDA - IMAGEN */
.empiezo-left {
  width: clamp(45%, 48%, 50%);
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  margin: 0; 
  padding: 0; 
  text-align: center;
  position: relative;
}

.empiezo-photo {
  width: clamp(130%, 150%, 170%); 
  max-width: 800px; 
  height: auto;
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* COLUMNA DERECHA - CONTENIDO */
.empiezo-right {
  width: clamp(70%, 72%, 75%);
  padding: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  max-width: 600px;
}

.empiezo-subtitle {
  font-family: "The Castelo", serif !important;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 300;
  color: var(--color-acento-principal);
  margin: 0 0 clamp(12px, 1.5vh, 18px) 0;
  text-align: left;
  line-height: 1.3;
}

.empiezo-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(38px, 4.5vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-negro-seccion);
  margin: 0 0 clamp(18px, 2vh, 24px) 0;
  text-align: left;
}

.empiezo-description {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 300;
  color: var(--color-texto-principal);
  line-height: 1.4;
  margin-bottom: clamp(16px, 2vh, 22px);
  text-align: left;
}

.empiezo-highlight.italic-gold {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-acento-principal);
  font-style: italic;
  margin-bottom: clamp(16px, 2vh, 22px);
  text-align: left;
}

.empiezo-value {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 300;
  color: var(--color-texto-principal);
  margin-bottom: clamp(24px, 3vh, 32px);
  text-align: left;
  line-height: 1.3;
}

/* CTA BOTÓN VERDE */
.cta-button-green {
  background-color: #355e3b;
  color: var(--color-blanco);
  border-bottom: 4px solid #243a27;
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  padding: clamp(12px, 1.8vh, 16px) clamp(22px, 3vw, 28px);
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: clamp(22px, 2.2vh, 26px);
  display: inline-block;
  text-decoration: none !important;
  text-align: center;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.cta-button-green:hover {
  background-color: #2d4f32;
  color: var(--color-blanco);
  border-bottom: 4px solid #1a2d1c;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

.cta-button-green:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #243a27;
}

.cta-button-green:focus,
.cta-button-green:visited {
  color: var(--color-blanco);
  text-decoration: none !important;
}

.empiezo-final {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 300;
  color: var(--color-texto-principal);
  margin-bottom: clamp(24px, 3vh, 32px);
  text-align: left;
  line-height: 1.3;
}

/* BREAKPOINT INTERMEDIO 1200px  */
@media (max-width: 1200px) {
  .empiezo-subtitle {
    font-size: clamp(22px, 2.5vw, 28px); 
  }
  
  .empiezo-title {
    font-size: clamp(35px, 4vw, 46px); 
  }
  
  .empiezo-description,
  .empiezo-value,
  .empiezo-final {
    font-size: clamp(16px, 1.8vw, 22px); 
  }
  
  .empiezo-highlight.italic-gold {
    font-size: clamp(18px, 2vw, 24px); 
  }
  
  .cta-button-green {
    font-size: clamp(16px, 1.8vw, 20px); 
  }
}

/* BREAKPOINT INTELIGENTE 840px - CAMBIO A COLUMNA VERTICAL */


@media (max-width: 840px) {
  .como-empiezo {
    margin-top: 0;
    padding: clamp(2rem, 5vh, 3rem) 0;
  }
  
  .como-empiezo .container {
    max-width: var(--container-mobile);
    width: 90%;
  }
  
  /* CAMBIO ESTRUCTURAL - VERTICAL */
  .empiezo-content {
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
    margin-top: 0;
    width: 100%;
    padding: 0 clamp(0.5rem, 2vw, 1.5rem);
    justify-content: center;
  }
  
.empiezo-left {
  width: 100%;
  margin-top: 0; 
  padding: clamp(1rem, 3vw, 2rem);
  order: 1; /* IMAGEN ARRIBA */
}
  
  .empiezo-photo {
    width: clamp(80%, 90%, 100%);
    max-width: 400px;
  }
  
.empiezo-right {
  width: 100%;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
  text-align: center; 
  order: 2; /* TEXTO ABAJO */
}
  
  /* TIPOGRAFÍA INCREMENTADA POST-BREAKPOINT */
  .empiezo-title {
    font-size: clamp(38px, 6vw, 48px); 
    line-height: 1.2;
    text-align: center;
  }
  
  .empiezo-subtitle {
    font-size: clamp(24px, 4vw, 28px);
    text-align: center;
  }
  
  .empiezo-description,
  .empiezo-value {
    text-align: center;
    font-size: clamp(18px, 2.8vw, 22px); 
  }

  .empiezo-highlight.italic-gold {
    text-align: center;
    font-size: clamp(22px, 2.8vw, 22px); 
  }

.cta-button-green {
  display: block;
  margin: clamp(6px, 1vh, 8px) auto; 
  width: fit-content;
  font-size: clamp(18px, 3vw, 22px);
}

.empiezo-final {
  text-align: center;
  font-size: clamp(18px, 2.8vw, 22px);
  margin-top: clamp(16px, 3vh, 20px); 
}
}





/* =========================================================================
   SECCIÓN TESTIMONIOS - CAROUSEL 
   Carousel responsive con 3 testimonios visibles y controles optimizados
   ========================================================================= */

.testimonios {
  background-color: #F9F5F2;
  padding: var(--padding-section) var(--padding-lateral);
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.testimonios .container {
  max-width: var(--container-max);
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

.testimonios .section-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(42px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-texto-principal);
  text-align: center;
  margin: 0 0 var(--gap-section) 0;
}

/* ESTRUCTURA CAROUSEL */
.testimonios-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.testimonios-container {
  position: relative;
  width: calc(100% - 60px); 
  margin: 0 auto;
  overflow: hidden;
}

.testimonios-wrapper {
  display: flex;
gap: clamp(1px, 0.1vw, 4px);
  transition: transform 0.8s ease;
  width: fit-content;
}

/* TARJETAS DE TESTIMONIOS */
.testimonio {
  flex: 0 0 33.333%;
  width: 33.333%;
  min-width: clamp(250px, 18vw, 280px);
  max-width: clamp(320px, 31vw, 379px);
  min-height: clamp(280px, 20vh, 350px);
  background: var(--color-beige-oscuro);
  border-radius: clamp(15px, 1.2vw, 25px);
  padding: clamp(1rem, 1.2vw, 1.5rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  margin: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonio:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.cliente-nombre {
  font-family: "The Castelo", serif !important;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--color-acento-principal) !important;
  margin-bottom: clamp(6px, 1vh, 10px);
  text-align: center;
}

.cliente-cargo {
  font-family: "Lato Light Italic", sans-serif !important;
  font-weight: 600; /* AGREGAR NEGRITA */
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-texto-secundario);
  margin-bottom: clamp(16px, 2vh, 22px);
  font-style: italic;
  text-align: center;
}

.testimonio-texto {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.8; 
  color: var(--color-texto-principal);
  margin-bottom: clamp(15px, 2vh, 20px); 
  text-align: center;
  flex-grow: 1; 
}

.testimonio-adicional {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.8; 
  color: var(--color-texto-principal);
  text-align: center;
  margin-bottom: 0;
  flex-grow: 1; 
}

/* BOTONES DE NAVEGACIÓN */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: var(--color-beige-oscuro);
  border: none;
  border-radius: 50px;
  width: clamp(44px, 5vw, 54px);
  height: clamp(44px, 5vw, 54px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--color-texto-principal);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

.carousel-btn:hover {
  background-color: var(--color-acento-principal);
  color: var(--color-blanco);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

/* INDICADORES DE PUNTOS */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  margin-top: var(--gap-section);
}

.dot {
  width: clamp(6px, 1.2vw, 9px);
  height: clamp(6px, 1.2vw, 9px);
  border-radius: 50%;
  background-color: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: var(--color-acento-principal);
  transform: scale(1.3);
}

.dot:hover {
  background-color: var(--color-acento-secundario);
  transform: scale(1.1);
}


/* BREAKPOINT INTERMEDIO - 2 TESTIMONIOS */
@media (max-width: 1024px) {
  .testimonio {
    flex: 0 0 calc(50% - 10px); 
    width: calc(50% - 10px);
    min-width: 280px;
  }
}



/* BREAKPOINT INTELIGENTE 840px */
@media (max-width: 840px) {
  .testimonios {
    padding: clamp(3rem, 8vh, 5rem) clamp(0.5rem, 2vw, 2rem);
  }
  
.testimonios-container {
  width: 100%;
  margin: 0;
  padding: 0 30px;
  box-sizing: border-box;
}
  
  .testimonios .section-title {
    font-size: clamp(36px, 6vw, 48px);
    margin-bottom: clamp(2rem, 5vh, 3rem);
  }
  
 
.carousel-btn {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 16px;
  z-index: 20;
  background-color: rgba(232, 221, 205, 0.9);
  position: absolute; 
  top: 50%;
  transform: translateY(-50%);
}

.carousel-prev {
  left: 0px;
}

.carousel-next {
  right: 0px;
}
  .carousel-btn {
  background-color: rgba(232, 221, 205, 0.7); 
  backdrop-filter: blur(3px); 
}

.carousel-btn:hover {
  background-color: rgba(185, 146, 105, 0.9); 
}
  /* TESTIMONIOS 1 POR VEZ CENTRADOS */
.testimonio {
  flex: 0 0 75%; 
  width: 75%;
  min-width: 250px;
  max-width: 320px; 
  margin: 0 auto;
  min-height: auto;
  padding: 1.3rem;
  box-sizing: border-box;
}
  
.testimonios-wrapper {
  gap: 0; 
  justify-content: center;
  align-items: center;
}
  
  /* TEXTO SIN DESBORDAMIENTO */
  .cliente-nombre {
    font-size: clamp(20px, 4vw, 24px);
    margin-bottom: 8px;
  }
  
  .cliente-cargo {
    font-size: clamp(14px, 3vw, 16px);
    margin-bottom: 15px;
  }
  
  .testimonio-texto,
  .testimonio-adicional {
    font-size: clamp(15px, 3.5vw, 18px);
    line-height: 1.5; 
    margin-bottom: 10px;
    word-wrap: break-word; 
    overflow-wrap: break-word;
  }
}








/* =========================================================================
   SECCIÓN FAQ 
   Sistema de preguntas frecuentes manteniendo diseño original con responsive fluido
   ========================================================================= */

.faq {
  background-color: #FFFFFF;
  padding: clamp(3rem, 6vh, 4rem) 0;
}

.faq .container {
  max-width: min(100%, 1140px);
  width: clamp(70%, 75vw, 70%);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.faq .section-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(38px, 4.5vw, 50px);
  font-weight: 400;
  line-height: clamp(42px, 5vw, 55px);
  color: #222222;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 30px);
}

.faq-list {
  max-width: 950px;
  margin: 0 auto clamp(1.5rem, 2.5vw, 2rem);
  padding: 0;
}

/* ESTRUCTURA DEL ITEM FAQ */
.faq-item {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 6px;
}

/* TÍTULO DEL FAQ */
.faq-question {
  background-color: #F5F5F5;
  border-style: none;
  border-radius: 5px;
  padding: clamp(0.4rem, 1vh, 0.5rem) clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0 clamp(8px, 1.5vw, 10px);
  list-style: none;
  color: #1f2124;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.faq-question:hover {
  background-color: #E8E8E8;
  color: #1f2124;
}

/* HEADER DEL TÍTULO */
.faq-question-header {
  display: flex;
  flex: 1;
  align-items: center;
  text-align: left;
}

/* TEXTO DEL TÍTULO */
.faq-question-text {
  font-family: "Lato Light", sans-serif !important;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #1f2124;
  cursor: pointer;
  align-items: center;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* ICONO DEL FAQ */
.faq-question-icon {
  align-items: center;
  display: flex;
  flex-direction: row;
  order: -1;
  position: relative;
  width: fit-content;
}

.faq-question-icon span {
  height: clamp(12px, 1.5vw, 15px);
  width: auto;
  cursor: pointer;
}

/* SVG DEL ICONO */
.faq-question-icon i {
  color: #1f2124;
  font-size: clamp(12px, 1.5vw, 15px);
  height: clamp(12px, 1.5vw, 15px);
  fill: #1f2124;
  transition: all 0.3s ease;
}

/* ESTADOS DEL ICONO CERRADO/ABIERTO */
.faq-icon-closed {
  display: flex;
}

.faq-icon-opened {
  display: none;
}

.faq-item.expanded .faq-icon-closed {
  display: none;
}

.faq-item.expanded .faq-icon-opened {
  display: flex;
}

/* RESPUESTA DEL FAQ */
.faq-answer {
  padding: 0;
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 250;
  color: var(--color-texto-principal);
  line-height: 1.5;
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  margin: 0;
}

/* ESPACIADO DE SALTOS DE LÍNEA EN FAQ */
.faq-answer br {
  line-height: 2;
}

.faq-item.expanded .faq-answer {
  display: block;
  opacity: 1;
  max-height: 300px;
  margin-top: clamp(8px, 1vh, 12px);
}

/* CONTENEDOR INTERNO DE LA RESPUESTA CON EFECTO 3D COMPLETO */
.faq-answer p {
  margin: 0;
  padding: clamp(0.8rem, 1.5vh, 1rem) clamp(1.5rem, 3vw, 2rem);
  background-color: #F5F5F5;
  border: 1px solid #d5d8dc;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: left;
}

/* ESPACIADO ENTRE ITEMS */
.faq-item:not(:last-child) {
  margin-bottom: 6px;
}

/* ENLACES CTA ROJOS DENTRO DEL FAQ */
.faq-cta-link {
  color: #CC3300;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
  display: inline-block;
}

.faq-cta-link:hover {
  color: #AA2200;
  border-bottom: 1px solid #CC3300;
}

.faq-cta-link:visited {
  color: #CC3300;
}

/* CTA BUTTON DARK CON EFECTOS 3D MEJORADOS */
.faq .cta-button-dark {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: #ffffff;
  background-color: #2C2C2C;
  padding: clamp(10px, 1.5vh, 14px) clamp(20px, 3vw, 28px);
  border: none;
  border-radius: 4px;
  border-bottom: 4px solid #1A1A1A;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
  margin: clamp(1rem, 2vh, 1.5rem) auto 0;
}

.faq .cta-button-dark:hover {
  background-color: #333333;
  color: #ffffff;
  border-bottom: 4px solid #111111;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.faq .cta-button-dark:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #000000;
}

.faq .cta-button-dark:focus,
.faq .cta-button-dark:visited {
  color: #ffffff;
  background-color: #333333;
  text-decoration: none;
}

/* ESTRUCTURA INTERNA DEL BOTÓN */
.faq .cta-button-dark span {
  text-decoration: inherit;
  display: inline-block;
}

/* NEGRITAS ESTRATÉGICAS EN FAQ */
.faq-answer strong {
  font-weight: 600;
  color: #1f2124;
}

/* RESPONSIVE BREAKPOINT 840PX - OPTIMIZACIÓN MÓVIL */

@media (max-width: 840px) {
  .faq .container {
    width: clamp(85%, 90vw, 95%);
    padding: 0 clamp(0.8rem, 2vw, 1.2rem);
  }

  .faq .section-title {
    font-size: clamp(42px, 5.5vw, 48px);
    line-height: clamp(46px, 6vw, 52px);
    margin-bottom: clamp(28px, 4vw, 32px);
  }

  .faq-question {
    padding: clamp(0.6rem, 1.5vh, 0.8rem) clamp(1.2rem, 2.5vw, 1.5rem);
    gap: 0 clamp(10px, 2vw, 12px);
  }

  .faq-question-text {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.3;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
  }

  .faq-answer {
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
  }

  .faq-answer p {
    padding: clamp(1rem, 2vh, 1.2rem) clamp(1.2rem, 2.5vw, 1.5rem);
  }

  .faq .cta-button-dark {
    font-size: clamp(18px, 2.2vw, 22px);
    padding: clamp(12px, 2vh, 16px) clamp(24px, 4vw, 32px);
    margin-top: clamp(2rem, 4vh, 2.5rem);
  }
}









/* =========================================================================
   SECCIÓN BIOGRAFÍA - MARÍA DELASCIO
   Layout 60/40 responsive con imagen+texto y fondo degradado fluido
   ========================================================================= */

.maria-delascio {
  background: linear-gradient(180deg, var(--color-fondo-hero) 60%, var(--color-beige-oscuro) 60%);
  padding: clamp(2rem, 4vh, 3rem) 0;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.maria-delascio .container {
  max-width: min(90%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 4rem);
}

/* CONTENEDOR PRINCIPAL LAYOUT 60/40 */
.maria-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* COLUMNA IZQUIERDA - TEXTO 60% */
.maria-left {
  width: 60%;
  flex: 0 0 60%;
  padding-right: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}

/* TÍTULO PRINCIPAL MARÍA */
.maria-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(2.5rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: clamp(3rem, 3.5vw, 3.5rem);
  color: var(--color-acento-principal);
  margin: clamp(-2.5rem, -3vw, -3rem) 0 clamp(8px, 1vw, 10px) clamp(8px, 1vw, 10px);
  text-align: left ;
}

/* TEXTO DESTACADO CURSIVA DORADA */
.maria-highlight {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(1.25rem, 1.8vw, 1.375rem);
  font-weight: 600;
  line-height: clamp(1.25rem, 1.8vw, 1.375rem);
  color: var(--color-acento-principal);
  font-style: italic;
}

/* DESCRIPCIÓN PRINCIPAL */
.maria-description {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--color-texto-principal);
  line-height: 1.5;
  margin-bottom: clamp(1.5rem, 3vw, 1.875rem);
  text-align: left;
}

/* TEXTO ADICIONAL */
.maria-additional {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  color: var(--color-texto-principal);
  line-height: 1.5;
  margin-bottom: 0;
  text-align: left;
}

/* COLUMNA DERECHA - IMAGEN 40% */
.maria-right {
  width: 40%;
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* FOTO MARÍA RESPONSIVE */
.maria-photo {
  width: 100%;
  height: auto;
  max-width: clamp(280px, 35vw, 400px);
  border: none;
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: block;
  transition: all 0.3s ease;
}

.maria-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
   RESPONSIVE BREAKPOINT 840PX - CAMBIO ESTRUCTURAL HORIZONTAL→VERTICAL
   ========================================================================= */

@media (max-width: 840px) {
  .maria-delascio {
    background: linear-gradient(180deg, var(--color-fondo-hero) 52%, var(--color-beige-oscuro) 52%);
    padding: clamp(2.5rem, 5vh, 3.5rem) 0;
  }

  .maria-delascio .container {
    max-width: min(95%, 800px);
    padding: 0 clamp(0.8rem, 2vw, 1.5rem);
  }

  /* CAMBIO A LAYOUT VERTICAL */
  .maria-content {
    flex-direction: column;
    gap: clamp(2rem, 4vw, 2.5rem);
    text-align: center;
  }

  /* COLUMNAS FULL WIDTH */
  .maria-left {
    width: 100%;
    flex: none;
    padding-right: 0;
    padding-top: clamp(1.5rem, 3vh, 2rem);
    order: 2;
  }

  .maria-right {
    width: 100%;
    flex: none;
    order: 1;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
  }

  /* TÍTULO CENTRADO MÓVIL */
  .maria-title {
    font-size: clamp(2.4rem, 4.5vw, 2.8rem);
    line-height: clamp(2.6rem, 5vw, 3rem);
    margin: clamp(-2rem, -3vw, -1.5rem) 0 clamp(12px, 2vw, 16px) 0;
    text-align: left;
  }

  /* TEXTOS INCREMENTADOS POST-BREAKPOINT */
  .maria-highlight {
    font-size: clamp(1.4rem, 2.5vw, 1.5rem);
    line-height: clamp(1.4rem, 2.5vw, 1.5rem);
    text-align: center;
  }

  .maria-description {
    font-size: clamp(1.2rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    margin-bottom: clamp(1.8rem, 3.5vw, 2rem);
    margin-top: clamp(1.8rem, 3.5vw, 2rem);
    text-align: left;
  }

  .maria-additional {
    font-size: clamp(1.2rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    text-align: center;
  }

  /* IMAGEN CENTRADA MÓVIL */
  .maria-photo {
    max-width: clamp(300px, 60vw, 420px);
    border-radius: 0px;
  }
}








/* =========================================================================
   SECCIÓN FINAL NEGRA - CIERRE DEL SITIO
   Título final sobre fondo negro con footer y botón subir responsive
   ========================================================================= */

.final-negra {
  background-color: var(--color-negro-seccion);
  padding: clamp(2rem, 4vh, 3rem) 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.final-negra .container {
  max-width: min(90%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* TÍTULO FINAL CURSIVA DORADA */
.final-title {
  font-family: "AGaramondPro Italic", serif !important;
  font-size: clamp(2.8rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-acento-principal);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* =========================================================================
   FOOTER - PIE DE PÁGINA
   ========================================================================= */

.footer {
  background-color: #FFFFFF;
  padding: clamp(1.5rem, 3vh, 2rem) 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .container {
  max-width: min(90%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* LOGO FOOTER RESPONSIVE */
.footer-logo {
  max-width: clamp(160px, 20vw, 200px);
  height: auto;
  margin-bottom: clamp(0.8rem, 2vh, 1rem);
  display: block;
}

/* TEXTO FOOTER */
.footer-text {
  font-family: "Lato Light", sans-serif !important;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 300;
  color: var(--color-texto-principal);
  margin: 0;
  text-align: center;
}

/* =========================================================================
   BOTÓN SUBIR - SCROLL TO TOP
   ========================================================================= */

.scroll-to-top {
  position: fixed;
  bottom: clamp(20px, 3vh, 30px);
  right: clamp(20px, 3vw, 30px);
  width: clamp(45px, 6vw, 50px);
  height: clamp(45px, 6vw, 50px);
  background-color: var(--color-acento-principal);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  z-index: 1000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid #8A6B4A;
  transform: translateY(0);
  transition: all 0.3s ease;
  border: none;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background-color: #A08458;
  border-bottom: 3px solid #7A5C3E;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.scroll-to-top:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #7A5C3E;
}

.scroll-to-top i {
  font-size: clamp(16px, 2vw, 18px);
  transition: all 0.3s ease;
}

/* =========================================================================
   RESPONSIVE BREAKPOINT 840PX - OPTIMIZACIÓN MÓVIL
   ========================================================================= */

@media (max-width: 840px) {
  .final-negra {
    padding: clamp(2.5rem, 5vh, 3.5rem) 0;
  }

  .final-negra .container {
    max-width: min(95%, 800px);
    padding: 0 clamp(0.8rem, 2vw, 1.5rem);
  }

  /* TÍTULO INCREMENTADO POST-BREAKPOINT */
  .final-title {
    font-size: clamp(3.2rem, 6vw, 3.6rem);
    line-height: 1.1;
  }

  /* FOOTER MÓVIL */
  .footer {
    padding: clamp(2rem, 4vh, 2.5rem) 0;
  }

  .footer .container {
    max-width: min(95%, 800px);
    padding: 0 clamp(0.8rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-logo {
    max-width: clamp(140px, 25vw, 180px);
    margin-bottom: clamp(1rem, 2.5vh, 1.2rem);
  }

  .footer-text {
    font-size: clamp(13px, 1.6vw, 15px);
  }

  /* BOTÓN SUBIR MÓVIL */
  .scroll-to-top {
    bottom: clamp(15px, 2vh, 20px);
    right: clamp(15px, 2vw, 20px);
    width: clamp(48px, 7vw, 52px);
    height: clamp(48px, 7vw, 52px);
  }

  .scroll-to-top i {
    font-size: clamp(18px, 2.5vw, 20px);
  }
}