:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --brand: #d4af37;
  --card: rgba(0,0,0,0.03);
  --shadow: 0 6px 16px rgba(0,0,0,.15);
  --radius: 14px;
  --maxw: 1180px;

  --fade-dur: 1600ms;
  --fade-ease: cubic-bezier(.22,.61,.36,1);
  --zoom-from: 1.015;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width: min(92vw, var(--maxw));
  margin-inline: auto;
}

/* ===== HERO ===== */
.section-hero{
  padding: clamp(28px, 6vw, 56px) 0;
}

.hero-title{
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(20px, 3.5vw, 28px);
  text-wrap: balance;
  text-align: center;
}

.hero-grid{
  display: grid;
  gap: clamp(16px, 3vw, 28px);
}

/* 2 columnas (la imagen un poco más grande en tablet/desktop) */
@media (min-width: 768px){
  .hero-grid{
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
}

.hero-visual{
  position: relative;
  min-height: clamp(280px, 38vw, 540px);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff; /* ← antes #f4f4f4, ahora blanco puro */
  box-shadow: var(--shadow);
}

/* ===== SLIDER ===== */
.fade-slider{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
  display: grid;
}
.fade-slider .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transform: scale(var(--zoom-from)) translateZ(0);
  filter: blur(6px) brightness(.98) saturate(.96);
  transition:
    opacity var(--fade-dur) var(--fade-ease),
    transform calc(var(--fade-dur) * 1.1) var(--fade-ease),
    filter calc(var(--fade-dur) * .95) var(--fade-ease);
  will-change: opacity, transform, filter;
}
.fade-slider .slide.is-active{
  opacity: 1;
  transform: scale(1) translateZ(0);
  filter: blur(0) brightness(1) saturate(1);
}
.fade-slider::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff; /* ← antes #f4f4f4, ahora blanco detrás del slider */
  z-index: 0;
}
.fade-slider .slide{ z-index: 1; }

@media (prefers-reduced-motion: reduce){
  :root{ --fade-dur: 120ms; }
  .fade-slider .slide{
    transition: opacity .01s linear, transform .01s linear, filter .01s linear;
    transform: none;
    filter: none;
  }
}

/* ===== COPY ===== */
.hero-copy{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  padding: clamp(16px, 3.2vw, 28px);
  box-shadow: var(--shadow);
}

.hero-subtitle{
  font-size: clamp(16px, 2.4vw, 22px);
  margin: 0 0 12px;
  color: var(--fg);
  font-weight: bold;
}

.hero-argumento p{
  margin: 0 0 10px;
  color: var(--muted);
}
.bullets{
  margin: 10px 0 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{ margin: 6px 0; }

/* ===== CTA ===== */
.hero-cta{ margin-top: clamp(14px, 3vw, 20px); }
.btn.cta{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7e37d, #d4af37);
  color: #111;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(212,175,55,.45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn.cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(212,175,55,.55);
  filter: brightness(1.05);
}
.btn.cta:focus-visible{
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}
.cta-note{
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.spacer{ height: 1px; }

/* === Ajuste responsive: .btn.cta === */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .btn.cta{
    font-size: 1rem;               /* asegura legibilidad */
    padding: 12px 20px;            /* un pelín más compacta */
    min-height: 48px;              /* área táctil cómoda */
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .btn.cta{
    display: block;                /* ocupa su propia línea */
    width: 100%;                   /* CTA protagonista en mobile */
    text-align: center;
    font-size: 1rem;
    padding: 14px 20px;            /* dedo cómodo sin exagerar */
    min-height: 48px;              /* guía de accesibilidad */
    box-shadow: 0 6px 14px rgba(212,175,55,.40); /* suaviza un toque la sombra */
  }
  /* si querés compactar el espacio debajo del botón en mobile */
  .cta-note{ margin-top: 6px; text-align: center;}
}


/* ===== SECCIÓN BENEFICIOS ===== */
.section-benefits{
  padding: clamp(30px, 7vw, 70px) 0;
}
.benefits-head{
  text-align: center;
  margin-bottom: clamp(18px, 4vw, 28px);
}
.benefits-overline{
  margin: 0 0 8px;
  font-size: clamp(14px, 2.2vw, 16px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}

.benefits-grid{
  display: grid;
  gap: clamp(14px, 3vw, 24px);
  grid-template-columns: 1fr;
  margin-top: clamp(16px, 4vw, 24px);
}
@media (min-width: 768px){
  .benefits-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefit-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 22px);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: center;
}
.benefit-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.benefit-icon{
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px auto;
  color: var(--brand);
}
.benefit-icon svg{
  width: 80px;
  height: 80px;
}

.benefit-title{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.8vw, 20px);
  line-height: 1.2;
}
.benefit-text{
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 16px);
}

/* ====== CARRUSEL CONTINUO (marquee de tarjetas) ====== */
.section-marquee{
  padding: clamp(26px, 6.5vw, 70px) 0;
  background:
    radial-gradient(1200px 200px at 50% 0%, rgba(212,175,55,0.08), transparent),
    #fff;
}
.marquee-title{
  margin: 0 0 6px;
  text-align: center;
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: -0.01em;
  color: var(--brand);
}
.marquee-subtitle{
  margin: 0 auto clamp(14px, 3vw, 22px);
  text-align: center;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 16px);
  max-width: 60ch;
}

.marquee-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 14px; /* aire para recorte lateral agradable */
}
.marquee-track{
  display: inline-flex;
  gap: 14px;
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}
.marquee-card{
  flex: 0 0 auto;
  width: clamp(140px, 28vw, 220px);
  aspect-ratio: 3 / 4;
  background: #f4f4f4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  position: relative;
}
.marquee-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.marquee-meta{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: .85rem;
  backdrop-filter: blur(4px);
}
.marquee-meta strong{ font-weight: 700; }

.marquee-fader{
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  pointer-events: none;
}
.marquee-fader.left{
  left: 0;
  background: linear-gradient(90deg, #fff, transparent);
}
.marquee-fader.right{
  right: 0;
  background: linear-gradient(270deg, #fff, transparent);
}

.marquee-hint{
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #777;
  font-size: .9rem;
}

@media (max-width: 768px){
  .marquee-card{
    width: clamp(140px, 42vw, 220px);
  }
}

/* === Ajustes responsive: título del marquee === */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .section-marquee .marquee-title{
    font-size: 1.75rem; /* ~28px (antes podía llegar a 34px) */
    line-height: 1.2;
    margin-bottom: 6px;
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .section-marquee .marquee-title{
    font-size: 1.5rem;  /* ~24px */
    line-height: 1.2;
    margin-bottom: 6px;
    text-transform: uppercase;
    padding: 40px 0 10px 0;
  }
  .section-marquee .marquee-subtitle {
    padding: 0 .3rem;
    text-wrap: balance;
  }
}

/* ====== CLIENTES ====== */
.section-clientes {
  padding: 50px 20px;
  text-align: center;
  background: #f8f8f8;
}

.clientes-title { font-size: 2rem; margin-bottom: 10px; color: var(--brand);}
.clientes-subtitle { font-size: 1rem; color: #666; margin-bottom: 40px; padding: 0 6rem;} 
.cliente-bloque { margin-bottom: 80px; }
.cliente-nombre { font-size: 1.5rem; margin-bottom: 30px; }

.testimonios-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.testimonio-wrap {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.testimonio-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: #444;
  margin: 0 0 8px 0;
  line-height: 1.3;
  text-align: center;
}
.testimonio-bloque {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  background: #fff;
}

/* Carrusel de testimonios con <picture> */
.testimonio-slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  z-index: 1;
}

/* Cada picture es un slide */
.testimonio-slider picture {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Imagen dentro del picture */
.testimonio-slider picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* mostrar obra completa */
  background: #fff;     /* marco blanco */
  display: block;
}

.flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.4);
  border: none;
  font-size: 1rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  user-select: none;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(0,0,0,0.75);
}
.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }
.flecha:hover { background: rgba(0, 0, 0, 0.4); color: #fff; }
.flecha:focus { outline: none; box-shadow: none; }
.flecha:focus-visible { outline: 2px solid rgba(0,0,0,0.35); outline-offset: 2px; }
.flecha:active {
  background: rgba(0,0,0,0.18); color: #fff;
  transform: translateY(-50%) scale(0.96);
  transition: transform 80ms ease, background 80ms ease, color 80ms ease;
}
@keyframes pulse {
  0% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.08); }
  100% { transform: translateY(-50%) scale(1); }
}
.flecha { animation: pulse 2.2s infinite ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .flecha { animation: none; }
  .testimonio-slider { transition: none; }
}
@media (max-width: 768px) {
  .testimonios-row { flex-direction: column; align-items: center; }
}


/* === Ajustes responsive sección CLIENTES (título y subtítulo) === */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .section-clientes .clientes-title{
    font-size: 1.75rem; /* antes 2rem */
    line-height: 1.2;
    color: var(--brand);
    text-transform: uppercase;
  }
  .section-clientes .clientes-subtitle{
    font-size: 0.95rem; /* antes 1rem */
    line-height: 1.5;
    margin-bottom: 32px; /* antes 40px */
    max-width: 68ch;     /* mejor legibilidad */
    margin-left: auto;
    margin-right: auto;
  }
  .section-clientes .cliente-nombre{
    font-size: 1.375rem; /* ~22px, por debajo del H2 (1.75rem) */
    line-height: 1.25;
    margin-bottom: 24px;  /* antes 30px */
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .section-clientes .clientes-title{
    font-size: 1.5rem;  /* antes 2rem */
    line-height: 1.2;
    margin-bottom: 8px; /* compacta el bloque */
    color: var(--brand);
    text-transform: uppercase;
    text-wrap: balance;
  }
  .section-clientes .clientes-subtitle{
    font-size: 0.9rem;  /* antes 1rem */
    line-height: 1.5;
    margin-bottom: 24px; /* antes 40px */
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    padding: 0 .4rem;
    text-wrap: balance;
  }
  .section-clientes .cliente-nombre{
    font-size: 1.26rem;   /* ~20px, por debajo del H2 (1.5rem) */
    line-height: 1.25;
    margin-bottom: 20px;  /* antes 30px */
  }
}



/* ====== BIO / SOBRE MÍ ====== */
.section-bio{
  padding: clamp(34px, 7vw, 80px) 0;
  background: #fff;
}

.bio-title{
  margin: 0 0 clamp(18px, 3.5vw, 28px);
  text-align: center;
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--brand);
}

.bio-grid{
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1fr;             /* 1 columna en móvil */
  align-items: center;
}

@media (min-width: 768px){
  .bio-grid{
    grid-template-columns: 1.05fr 1fr;    /* foto un poquito más grande */
  }
}

.bio-media{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  /* Relación agradable en móviles si la imagen tarda */
  aspect-ratio: 4 / 5;
}

.bio-media picture, .bio-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* ↔ Cambiá a 'contain' si querés ver todo con marco blanco */
  object-position: center;
  background: #fff;         /* marco blanco si sobra espacio */
}

.bio-copy{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 24px);
}

.bio-name{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.2;
}

.bio-copy p{
  margin: 0 0 10px;
  color: var(--muted);
}

/* === Ajustes responsive: título de la BIO === */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .section-bio .bio-title{
    font-size: 1.75rem; /* ~28px (más contenido que en desktop pero sin exceso) */
    line-height: 1.2;
    margin-bottom: 20px;
    text-wrap: balance;
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .section-bio .bio-title{
    font-size: 1.6rem;  /* ~24px (si la querés un poco más chica: 1.375rem ≈ 22px) */
    line-height: 1.2;
    margin-bottom: 16px;
    text-wrap: balance;
  }
  .bio-copy p {
      font-size: .9rem;
  }
}


/* ====== NUEVA SECCIÓN CONTACTO ====== */
.section-contact{
  padding: clamp(36px, 7vw, 80px) 0;
  background:
    linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02)),
    #fff;
}

.contact-title{
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.contact-subtitle{
  text-align: center;
  color: var(--muted);
  margin: 0 0 clamp(18px, 3.2vw, 28px);
  font-size: clamp(14px, 2.2vw, 16px);
}

.contact-card{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: clamp(16px, 3.2vw, 28px);
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.8vw, 18px);
  margin-bottom: clamp(16px, 3vw, 22px);
}
@media (min-width: 768px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
  }
  .form-field--full{
    grid-column: 1 / -1;
  }
}



/* =========
======= Ajustes responsive: título de CONTACTO 
============================================= */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .section-contact .contact-title,
  .section-contact .contact-tittle{
    font-size: 1.75rem; /* ~28px */
    line-height: 1.2;
    margin-bottom: 8px;
    text-wrap: balance;
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .section-contact .contact-title,
  .section-contact .contact-tittle{
    font-size: 1.5rem;  /* ~24px */
    line-height: 1.2;
    margin-bottom: 10px;
    text-wrap: balance;
  }
}

.form-field{ display: flex; flex-direction: column; gap: 6px; }
.form-field label{
  font-size: .92rem;
  color: #333;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea{ resize: vertical; min-height: 132px; }

input::placeholder, textarea::placeholder{ color: #999; }
input:focus, textarea:focus{
  outline: none;
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

.helper-row{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.helper-row .helper{ color: var(--muted); }
.helper-row .count{ color: #777; }

/* Mensaje de éxito */
.form-success{
  margin: 12px 0 0;
  font-weight: 600;
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 10px 14px;
  border-radius: 10px;
}


/* ====== Botón de envío + Spinner ====== */
/* No toco tu .btn base; solo ajusto el botón de submit */
.btn--submit{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  white-space: nowrap;
}

/* Contenedor del spinner (centrado absoluto) */
.btn--submit .btn__spinner{
  position: absolute;
  inset: 0;
  display: none;                 /* visible sólo en .is-loading */
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* SVG del spinner */
.spinner{
  width: 20px;
  height: 20px;
  animation: spin 0.9s linear infinite;
}
.spinner__track{
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  opacity: .25;
}
.spinner__head{
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
}

/* Estado cargando: oculta el texto y muestra el spinner */
.btn--submit.is-loading{ cursor: progress; }
.btn--submit.is-loading .btn__label{ opacity: 0; }
.btn--submit.is-loading .btn__spinner{ display: inline-flex !important; }

/* Accesibilidad y prevención de múltiples clics */
.btn--submit[disabled]{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--submit[aria-busy="true"]{ cursor: progress; }

/* Enfoque accesible del botón, consistente con tus inputs */
.btn--submit:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

/* Animación del spinner */
@keyframes spin{ to{ transform: rotate(360deg); } }



/* ====== SOPORTE <picture> EN EL HERO (slider) ====== */
/* Hace que <picture class="slide"> se comporte igual que un <img.slide> */
.fade-slider picture.slide{
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(var(--zoom-from)) translateZ(0);
  filter: blur(6px) brightness(.98) saturate(.96);
  transition:
    opacity var(--fade-dur) var(--fade-ease),
    transform calc(var(--fade-dur) * 1.1) var(--fade-ease),
    filter calc(var(--fade-dur) * .95) var(--fade-ease);
  z-index: 1;
}
.fade-slider picture.slide.is-active{
  opacity: 1;
  transform: scale(1) translateZ(0);
  filter: blur(0) brightness(1) saturate(1);
}
/* El <img> interno mantiene la proporción como antes */
.fade-slider picture.slide > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ====== MEJORAS DE RENDIMIENTO OPCIONALES ====== */
.section-marquee,
.section-clientes{
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* ====== PARCHE: marcos blancos sin blur ni fondo fantasma en el hero ====== */
.fade-slider picture.slide > img{
  background: #fff !important;       /* bordes blancos */
  background-image: none !important;  /* ignora el LQIP inline del HTML */
  background-size: initial !important;
  background-repeat: no-repeat !important;
}

/* Si NO querés blur en la transición (solo crossfade), descomentá esto: */
/*
.fade-slider .slide,
.fade-slider picture.slide{
  filter: brightness(.98) saturate(.96);  // sin blur(6px)
}
*/

/* ----------------------------
-------Preguntas Frecuentes ---
----------------------------- */
.section-faq{ padding: clamp(30px,7vw,70px) 0; background:#fff; }
.faq-title{ text-align:center; margin:0 0 16px; font-size: clamp(22px,3.4vw,30px); }
.faq-list{ max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq-list details{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.faq-list summary{ cursor:pointer; font-weight:600; outline:none; }
.faq-list p{ margin:10px 0 0; color:#555; }

/* === Ajustes responsive: párrafos dentro de FAQ === */

/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .section-faq .faq-list p{
    font-size: 0.95rem;   /* legible sin ocupar de más */
    line-height: 1.55;
    margin-top: 8px;      /* antes 10px */
  }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .section-faq .faq-list p{
    font-size: 0.9rem;    /* compacta en pantallas chicas */
    line-height: 1.55;
    margin-top: 8px;      /* antes 10px */
  }
}



/* ----------------------------
-------WhatsApp código ---------
----------------------------- */
.fab-whatsapp{
  position: fixed; right: 16px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25);
  z-index: 999; text-decoration: none;
}
.fab-whatsapp svg{ width: 28px; height: 28px; fill: currentColor; }
@media (min-width: 992px){ .fab-whatsapp{ bottom: 22px; right: 22px; } }

/* ===== WhatsApp FAB – reveal al llegar a CLIENTES, con animación elegante ===== */
.fab-whatsapp{
  opacity: 0;
  transform: translateY(10px) scale(.92);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity .28s cubic-bezier(.22,.61,.36,1),
    transform .28s cubic-bezier(.22,.61,.36,1),
    filter .28s cubic-bezier(.22,.61,.36,1);
}

.fab-whatsapp.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  .fab-whatsapp{ transition: none; filter: none; transform: none; }
}





/* ============================================= 
BIO: reducir imagen en escritorio manteniendo proporciones 
====================================================== */
@media (min-width:1024px) {
  /* Mantén tu layout actual; esto solo controla el tamaño máximo de la foto */
  .section-bio .bio-media {
    width: clamp(260px, 30vw, 400px); /* ajusta 30vw/400px si la quieres aún más chica/grande */
    max-width: 100%;
    margin: 0;               /* evita que un margin propio la agrande visualmente */
    align-self: center;      /* centra vertical si el contenedor es grid/flex */
    justify-self: end;     /* alinea a la izquierda si es grid */
  }

  .section-bio .bio-media picture,
  .section-bio .bio-media img {
    display: block;
    width: 100%;
    height: auto;            /* mantiene proporciones, sin recortes */
  }

  /* (Opcional) mejor legibilidad del texto */
  .section-bio .bio-copy {
    max-width: 62ch;
  }
}

/* === FOOTER ====================================================== */
.footer{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  /* antes: padding: clamp(16px, 3.2vw, 28px) 0; */
  padding: clamp(10px, 2vw, 16px) 0; /* ⇢ menos alto en todas las vistas */
}
.footer .footer-content{
  width: min(92vw, var(--maxw));
  margin-inline: auto;
  text-align: center;
  display: grid;
  /* antes: gap: 10px; */
  gap: clamp(6px, 1.6vw, 10px); /* ⇢ compacta el espacio entre filas */
}
.footer .redes-sociales{
  display: inline-flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  /* antes: margin-bottom: 6px; */
  margin-bottom: 4px; /* ⇢ menos aire */
}
.footer .redes-sociales a{
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.footer .redes-sociales a:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  filter: brightness(1.02);
}
.footer .redes-sociales img{ width: 20px; height: 20px; display: block; }

.footer p{
  margin: 0;               /* ⇢ elimina márgenes verticales grandes por defecto */
  line-height: 1.45;
}
.footer p + p{
  margin-top: 4px;         /* ⇢ separa apenas la segunda línea */
}

.footer .politicas-legales{
  color: var(--muted);
  margin-top: 4px;         /* ⇢ reduce aire respecto a los textos anteriores */
}
.footer .politicas-legales a{
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.25);
}
.footer .politicas-legales a:hover{
  color: var(--brand); border-bottom-color: var(--brand);
}

/* === Ajustes por breakpoint para afinar en tablet y móvil ======== */
/* Tablet (769–1023 px) */
@media (min-width: 769px) and (max-width: 1023px){
  .footer{ padding: 14px 0; }
  .footer .footer-content{ gap: 8px; }
  .footer .redes-sociales{ margin-bottom: 4px; }
  .footer .politicas-legales{ margin-top: 4px; }
}

/* Móvil (0–768 px) */
@media (max-width: 768px){
  .footer{ padding: 10px 0; }
  .footer .footer-content{ gap: 6px; }
  .footer .redes-sociales{ margin-bottom: 2px; }
  .footer .politicas-legales{ margin-top: 2px; }
}


/* === BANNER DE COOKIES =========================================== */
.cookie-banner{
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: center;
  z-index: 9999;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.cookie-banner.is-visible{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner p{
  margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45;
}
.cookie-banner p a{
  color: var(--fg); font-weight: 600; text-decoration: underline;
}
.cookie-buttons{
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.cookie-buttons button{
  font: inherit; cursor: pointer; border-radius: 999px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
#aceptar-cookies{
  background: linear-gradient(135deg, #f7e37d, #d4af37);
  color: #111; border-color: rgba(212,175,55,.55);
  box-shadow: 0 6px 14px rgba(212,175,55,.35);
  font-weight: 700;
}
#aceptar-cookies:hover{ transform: translateY(-1px); filter: brightness(1.04); }
#configurar-cookies{
  background: #fff; color: #111;
}
#configurar-cookies:hover{ background: #f7f7f7; }

/* Mobile: stack y botón a ancho completo */
@media (max-width: 768px){
  .cookie-banner{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .cookie-buttons{ justify-content: stretch; }
  .cookie-buttons button{ flex: 1 1 auto; }
}

/* === PANEL DE CONFIGURACIÓN ===================================== */
.cookie-panel.oculto{ display: none; }

.cookie-panel{
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  padding: 16px;
}
.cookie-panel .cookie-panel-content{
  width: min(92vw, 720px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  padding: clamp(16px, 3.2vw, 28px);
}
.cookie-panel h2{
  margin: 0 0 6px;
  font-size: clamp(20px, 3.2vw, 24px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cookie-panel p{
  margin: 0 0 12px;
  color: var(--muted);
}
#cookie-settings-form{
  display: grid; gap: 12px; margin-top: 10px;
}
#cookie-settings-form label{
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
#cookie-settings-form input[type="checkbox"]{
  accent-color: var(--brand); width: 18px; height: 18px; margin-top: 2px;
}
.cookie-panel-buttons{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;
}
.cookie-panel-buttons button{
  font: inherit; cursor: pointer; border-radius: 999px;
  min-height: 44px; padding: 10px 16px; border: 1px solid rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
#btnGuardarPreferencias{
  background: linear-gradient(135deg, #f7e37d, #d4af37);
  color: #111; border-color: rgba(212,175,55,.55);
  box-shadow: 0 6px 14px rgba(212,175,55,.35);
  font-weight: 700;
}
#btnGuardarPreferencias:hover{ transform: translateY(-1px); filter: brightness(1.04); }
#btnCancelarPreferencias{ background: #fff; }
#btnCancelarPreferencias:hover{ background: #f7f7f7; }

/* Accesibilidad y motion */
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition: none; }
  .cookie-buttons button, .cookie-panel-buttons button{ transition: none; }
}


/* =====================================================
========FIX 2025 · Cookie panel en móviles (Android/iOS) 
======================================================= */
.cookie-panel{
  /* respeta zonas seguras en móviles y evita que el overlay “apriete” el contenido */
  padding:
    max(12px, env(safe-area-inset-top, 0))
    max(12px, env(safe-area-inset-right, 0))
    max(12px, env(safe-area-inset-bottom, 0))
    max(12px, env(safe-area-inset-left, 0));
}

.cookie-panel .cookie-panel-content{
  /* limita la altura y habilita layout de columna */
  width: min(92vw, 720px);
  max-height: 88dvh; /* fallback natural a 88vh si el navegador no soporta dvh */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* el scroll lo hace el form */
}

#cookie-settings-form{
  /* hace scroll solo el contenido; los botones quedan pegados abajo */
  display: grid;
  gap: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px; /* aire para que los botones no tapen ítems al final */
}

/* botones “siempre visibles” dentro del panel */
.cookie-panel-buttons{
  position: sticky;
  bottom: 0;
  margin-top: 6px;
  padding-top: 10px;
  /* fondo en degradé para separar visualmente los botones del contenido que scrollea */
  background: linear-gradient(
    to top,
    rgba(255,255,255,.98),
    rgba(255,255,255,.95) 40%,
    rgba(255,255,255,0)
  );
  backdrop-filter: blur(2px);
  z-index: 1; /* por si hay elementos con sombras encima */
}

/* opcional: pantallas muy bajas (teclado abierto, dispositivos chicos) */
@media (max-height: 560px){
  .cookie-panel .cookie-panel-content{ max-height: 92dvh; }
}


/* ESTILOS PARA TABLA DE PRECIOS/MEDIDAS */
/* ====== SECCIÓN TABLA DE PRECIOS ====== */
.section-pricing{
  padding: clamp(36px, 6.5vw, 74px) 0;
  background: var(--bg);
  color: var(--fg);
}

.pricing-title{
  margin: 0 0 6px;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-align: center;
}
.pricing-subtitle{
  margin: 0 0 clamp(16px, 3.2vw, 22px);
  color: var(--muted);
  font-size: clamp(14px, 2.5vw, 16px);
  text-align: center;
}

.table-scroll{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
}
.table-scroll::before,
.table-scroll::after{
  content: "";
  position: sticky;
  top: 0;
  width: 26px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.table-scroll::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
  opacity: var(--leftShadow, 0);
}
.table-scroll::after{
  right: 0;
  background: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0));
  opacity: var(--rightShadow, 1);
}

.pricing-table{
  width: max(680px, 100%);
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(13px, 2.6vw, 15px);
}
.pricing-table th,
.pricing-table td{
  padding: clamp(10px, 2.8vw, 14px) clamp(10px, 3vw, 16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: center;
  white-space: nowrap;
}
.pricing-table tr:last-child th,
.pricing-table tr:last-child td{
  border-bottom: none;
}

.pricing-table th[scope="row"]{
  position: sticky;
  left: 0;
  background: #fff;
  text-align: left;
  font-weight: 600;
  z-index: 1;
  box-shadow: 6px 0 12px -8px rgba(0,0,0,.12);
}

.pricing-table td{
  font-variant-numeric: tabular-nums;
}

.pricing-table td:nth-child(odd){
  background: rgba(0,0,0,.015);
}
.pricing-table td:nth-child(even){
  background: rgba(0,0,0,.03);
}

/* Pista de scroll en móviles */
.table-hint{
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.9);
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
.table-scroll.is-scrolled .table-hint{
  opacity: 0;
  transform: translateY(6px);
}

/* Sombras laterales dinámicas */
.table-scroll.shadow-left{ --leftShadow: 1; }
.table-scroll.shadow-right{ --rightShadow: 1; }

/* === 👇 NUEVO: ocultar el letrero en escritorio y en impresión === */
@media (min-width: 1024px), print {
  .table-hint { display: none !important; }
}


/* —— Cookie panel: copia persuasiva + botones simples —— */
.cookie-advanced-toggle{
  margin-top: 8px;
  margin-bottom: 8px;
  border: none;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  color: #111;
}

.cookie-legal-note{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
}

#cookie-simple-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#btnAceptarTodoSimple{
  background: linear-gradient(135deg, #f7e37d, #d4af37);
  color: #111; border: 1px solid rgba(212,175,55,.55);
  border-radius: 999px; min-height: 44px; font-weight: 700;
}
#btnSoloEsencialesSimple{
  background: #fff; color: #111; border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px; min-height: 44px;
}

/* En móviles apilamos */
@media (max-width: 768px){
  #cookie-simple-actions{
    grid-template-columns: 1fr;
  }
}


/* ===== Panel Cookies: vista simple vs avanzada ===== */
.cookie-simple-actions { display: block; }
.cookie-simple-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px;
}
.cookie-simple-actions .btn-primario,
.cookie-simple-actions .btn-secundario { 
  font: inherit; min-height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12);
}
.cookie-simple-actions .btn-primario {
  background: linear-gradient(135deg, #f7e37d, #d4af37); color:#111; font-weight:700;
  box-shadow: 0 6px 14px rgba(212,175,55,.35);
}
.cookie-simple-actions .btn-secundario { background:#fff; color:#111; }
.btn-link {
  background: none; border: none; color: var(--fg); text-decoration: underline; cursor: pointer;
  padding: 6px 0; font: inherit;
}

/* En móvil, los dos botones a ancho completo */
@media (max-width: 600px){
  .cookie-simple-buttons { grid-template-columns: 1fr; }
}

/* El formulario avanzado (tarjetas) arranca oculto; el JS lo muestra al tocar "Ver detalles" */
#cookie-settings-form[hidden] { display: none !important; }



/* ===== FIX DEFINITIVO: layout y textos de tarjetas de cookies ===== */

/* grid correcto: col 1 checkbox (22px), col 2 el texto completo */
#cookie-settings-form label{
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  line-height: 1.35;
  /* evitar cortes agresivos */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* el checkbox va en la col 1 explícitamente */
#cookie-settings-form label > input[type="checkbox"]{
  grid-column: 1;
}

/* TODO el texto va en la col 2 dentro de .cookie-text */
#cookie-settings-form label .cookie-text{
  grid-column: 2;
  min-width: 0;         /* que pueda usar todo el ancho disponible */
}

/* título + nota entre paréntesis en línea */
#cookie-settings-form label .cookie-text strong{
  display: inline;
  margin-right: .35rem;
}

#cookie-settings-form label .cookie-text .cookie-note{
  display: inline;
  white-space: nowrap;  /* “(necesarias… )” en una sola línea */
  color: #666;
  margin-left: .25rem;
}

/* opcional: si algún navegador insiste en cortar, permití elipsis */
#cookie-settings-form label .cookie-text{
  overflow: hidden;
  text-overflow: ellipsis;
}