/* =========================================================
   VENDIMIA · Casa de Eventos — Tarija
   Hoja de estilos compartida
   Estética: evento de lujo · paleta cálida (vino, terracota, oro)
   ========================================================= */

/* ---------- Tipografias autoalojadas (sin depender de Google) ----------
   Incrustadas aqui a proposito: con @import el navegador tenia que
   descargar styles.css, leerlo y recien entonces pedir fonts.css, lo que
   retrasaba el primer texto en pantalla.

   Cormorant Garamond y Jost son fuentes VARIABLES: un solo archivo cubre
   todo el rango de grosores. Antes habia un archivo por peso (400, 500,
   600) pero eran copias identicas, asi que el navegador se descargaba
   tres veces lo mismo. Ahora va uno por familia y estilo, con el rango
   declarado en font-weight. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marcellus-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marcellus-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Variables ---------- */
:root{
  --wine:        #54582f;
  --wine-deep:   #272b00;
  --wine-soft:   #6d7040;
  --terracotta:  #a8842f;
  --clay:        #86895d;
  --gold:        #c9a24b;
  --gold-light:  #e6cd8c;
  --gold-deep:   #a6822e;  /* ajustado 2 puntos: con #a8842f los titulos
                              quedaban en 2.99:1 sobre crema, justo por debajo
                              del minimo de 3.0 para texto grande */
  /* Dorado para texto pequeno sobre fondo claro: #a8842f solo alcanza
     3.0:1 y el minimo legible es 4.5:1. Los titulos grandes siguen
     usando --gold-deep, que a ese tamano si cumple. */
  --gold-text:   #846825;
  --cream:       #f6ecdc;
  --ivory:       #fdf8ef;
  --ink:         #2a1610;
  --ink-soft:    #6a4f43;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-accent:  'Marcellus', serif;
  --font-body:    'Jost', sans-serif;

  --shadow-soft: 0 18px 50px -20px rgba(15,42,30,.45);
  --shadow-card: 0 24px 60px -28px rgba(15,42,30,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* Grano / textura sutil sobre todo el sitio */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; }
.kicker{
  font-family:var(--font-accent);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.74rem;
  color:var(--gold-text);
  display:inline-block;
}
.kicker--light{ color:var(--gold-light); }

.section{ padding:clamp(5rem,10vw,9rem) clamp(1.4rem,6vw,7rem); position:relative; }
.wrap{ max-width:1180px; margin:0 auto; }
.center{ text-align:center; }

/* Titulo de seccion. Antes iba repetido como estilo en linea en nueve sitios,
   con dos tamanos maximos distintos (3.2 y 3.4rem) sin motivo. */
.section-title{ font-size:clamp(2rem,5vw,3.4rem); color:var(--gold-deep); }
.section--cream{ background:var(--cream); }

/* Ornamento dorado divisor */
.ornament{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:1.6rem 0;
}
.ornament span{ height:1px; width:clamp(40px,12vw,120px); background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.ornament i{
  width:9px; height:9px; transform:rotate(45deg);
  border:1px solid var(--gold); display:block;
}
.ornament i::after{
  content:""; position:absolute; width:3px; height:3px; background:var(--gold);
  margin:2px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.4rem,6vw,4rem);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.scrolled{
  background:rgba(39, 43, 0, .92);
  background:color-mix(in srgb, var(--wine-deep) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:1rem clamp(1.4rem,6vw,4rem);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.6);
}
.brand{ display:flex; flex-direction:column; line-height:1; color:var(--ivory); position:relative; z-index:1100;
  margin-right:.75rem; /* en 320 px el logo se achica y quedaba pegado al idioma */ }
.brand b{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,4.5vw,1.55rem); letter-spacing:.12em; text-transform:uppercase; }
.brand small{ font-family:var(--font-accent); font-size:.6rem; letter-spacing:.45em; text-transform:uppercase; color:var(--gold-light); margin-top:.35rem; }

.nav-links{ display:flex; gap:2.4rem; align-items:center; }
.nav-links a{
  font-family:var(--font-accent); color:var(--ivory);
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  position:relative; padding:.3rem 0; opacity:.85; transition:opacity .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold-light); transition:width .4s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ opacity:1; color:var(--gold-light); }

.burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; z-index:1100; padding:6px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.burger span{ width:28px; height:2.5px; border-radius:2px; background:var(--gold-light); transition:.35s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Selector de idioma (desplegable) ----------
   Antes eran cuatro botones en fila (ES | EN | FR | PT): en el celular
   ocupaban tanto que el logo quedaba pegado a ellos y cada boton media
   apenas 19 px de alto, dificil de tocar. Ahora se ve solo el idioma
   actual y la lista se abre al tocarlo (main.js abre y cierra). */
.lang-switch{
  position:relative; z-index:1100;
  font-family:var(--font-accent); margin-left:1.6rem;
}
.lang-toggle{
  display:flex; align-items:center; gap:.45rem; min-height:36px;
  background:none; border:1px solid rgba(230,205,140,.35); cursor:pointer;
  color:var(--gold-light); font-family:inherit; font-size:.72rem;
  letter-spacing:.16em; line-height:1; padding:.5rem .7rem;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lang-toggle:hover,.lang-switch.open .lang-toggle{ border-color:var(--gold); background:rgba(201,162,75,.14); }
.lang-caret{ width:9px; height:6px; transition:transform .25s var(--ease); }
.lang-switch.open .lang-caret{ transform:rotate(180deg); }
/* visibility:hidden (y no solo opacity) para que la lista cerrada no
   reciba el foco al tabular */
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
  display:flex; flex-direction:column; padding:.35rem 0;
  background:var(--wine-deep); border:1px solid rgba(201,162,75,.45);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.lang-switch.open .lang-menu{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:44px; padding:.6rem 1.1rem; text-align:left;
  background:none; border:0; cursor:pointer;
  color:var(--ivory); font-family:inherit; font-size:.8rem; letter-spacing:.08em;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang-menu button:hover{ background:rgba(201,162,75,.14); color:var(--gold-light); }
.lang-menu button.active{ color:var(--gold-light); }
.lang-menu button.active::after{ content:"◆"; font-size:.55rem; color:var(--gold); }
.lang-menu button:focus-visible{ outline-offset:-3px; }

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- HERO genérico (subpáginas) ---------- */
.page-hero{
  min-height:100%; display:flex; align-items:flex-end;
  padding:8rem clamp(1.4rem,6vw,7rem) 4rem;
  position:relative; color:var(--ivory); overflow:hidden;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(201,162,75,.35), transparent 55%),
    linear-gradient(
      155deg,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.70) 55%,
      rgba(0, 0, 0, 0.90) 100%
    ),
    url("imagenes/img2.jpeg");
  background-size:cover; background-position:center;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 4 L48 32 L76 40 L48 48 L40 76 L32 48 L4 40 L32 32 Z' fill='none' stroke='%23c9a24b' stroke-width='.4' opacity='.18'/%3E%3C/svg%3E");
  background-size:90px 90px; opacity:.5;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(2.6rem,6vw,4.8rem); color:var(--ivory); text-wrap:balance; }
.page-hero h1 em{ color:var(--gold-light); font-style:italic; font-weight:500; }
.page-hero p{ max-width:540px; margin-top:1.2rem; color:rgba(253,248,239,.82); font-weight:300; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-accent); text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem;
  padding:1rem 2.2rem; cursor:pointer; transition:.45s var(--ease);
  border:1px solid var(--gold);
}
.btn-gold{ background:var(--gold); color:var(--wine-deep); border-color:var(--gold); }
.btn-gold:hover{ background:transparent; color:var(--gold-light); }
.btn-ghost{ background:transparent; color:var(--gold-light); }
.btn-ghost:hover{ background:var(--gold); color:var(--wine-deep); }
.btn-dark{ border-color:var(--wine); color:var(--wine); }
.btn-dark:hover{ background:var(--wine); color:var(--ivory); }

/* ---------- Foco visible (navegacion por teclado) ----------
   Sin esto no se ve donde esta el cursor al tabular. :focus-visible solo se
   activa con teclado, asi que el raton no arrastra ningun recuadro. */
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.nav-links a:focus-visible,.lang-switch button:focus-visible,.burger:focus-visible,
.brand:focus-visible,.wa-float:focus-visible,.car-btn:focus-visible,
.car-dots button:focus-visible,.footer a:focus-visible{
  outline:3px solid var(--gold-light); outline-offset:3px;
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--gold-light); outline-offset:1px;
}

/* Enlace para saltar el menu e ir directo al contenido. Solo aparece al
   tabular; es lo primero que encuentra quien navega con teclado. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--wine-deep); color:var(--gold-light);
  padding:1rem 1.6rem; font-family:var(--font-accent);
  letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
}
.skip-link:focus{ left:0; }

/* ---------- Reveal scroll ---------- */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
.reveal.d4{ transition-delay:.48s; }

/* ---------- FOOTER ---------- */
.footer{
  background:linear-gradient(180deg,var(--wine) ,var(--wine-deep));
  color:var(--cream); padding:clamp(3.5rem,7vw,5.5rem) clamp(1.4rem,6vw,7rem) 2.5rem;
  position:relative;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; max-width:1180px; margin:0 auto; }
.footer small.tag{ font-family:var(--font-accent); letter-spacing:.4em; font-size:.6rem; color:var(--gold-light); text-transform:uppercase; }
.footer p{ font-size:.92rem; color:rgba(246,236,220,.78); margin-top:.9rem; }
.footer-title{ font-family:var(--font-accent); letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--gold-light); margin-bottom:1rem; }
.footer ul li{ margin:.5rem 0; font-size:.92rem; color:rgba(246,236,220,.78); transition:color .3s; }
.footer ul li a:hover{ color:var(--gold-light); }
.footer-base{
  max-width:1180px; margin:3rem auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(201,162,75,.25);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.78rem; color:rgba(246,236,220,.6); letter-spacing:.06em;
}
.footer-base a{ color:var(--gold-light); border-bottom:1px solid rgba(230,205,140,.35); transition:border-color .3s; }
.footer-base a:hover{ border-bottom-color:var(--gold-light); }
/* Con el pie en una sola linea, el boton flotante de WhatsApp tapaba el
   final del credito al llegar al fondo de la pagina. */
@media(min-width:561px){ .footer-base{ padding-right:4.5rem; } }

/* =========================================================
   PÁGINA DE INICIO
   ========================================================= */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:center;
  color:var(--ivory); overflow:hidden;
  background:
    radial-gradient(140% 110% at 75% 15%, rgba(200,122,74,.4), transparent 50%),
    linear-gradient(
      155deg,
      rgba(0, 0, 0, 0.80) 0%,
      rgba(0, 0, 0, 0.70) 55%,
      rgba(0, 0, 0, 0.90) 100%
    ),
    url("imagenes/img2.jpeg");
  background-size:cover; background-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 6 L53 37 L84 45 L53 53 L45 84 L37 53 L6 45 L37 37 Z' fill='none' stroke='%23c9a24b' stroke-width='.4' opacity='.16'/%3E%3C/svg%3E");
  background-size:110px 110px;
}
.hero-inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:7rem clamp(1.4rem,6vw,7rem) 4rem; width:100%; text-align:center; }
.hero .kicker{ animation:fadeUp 1s var(--ease) both; }
.hero h1{
  font-size:clamp(2.8rem,6.2vw,5rem); line-height:1.02; margin:1.1rem 0;
  font-weight:500;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:block; text-wrap:balance; animation:fadeUp 1.1s var(--ease) both; }
.hero h1 .line:nth-child(2) span{ animation-delay:.16s; }
.hero h1 .line:nth-child(3) span{ animation-delay:.32s; }
.hero h1 em{ font-style:italic; color:var(--gold-light); font-weight:400; }
.hero .lede{ max-width:640px; color:rgba(253,248,239,.85); font-size:1.14rem; margin:.4rem auto 0; animation:fadeUp 1.1s .5s var(--ease) both; }
.hero-actions{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; animation:fadeUp 1.1s .66s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }

/* ---- Sección storytelling ---- */
.story{ background:var(--ivory); position:relative; }
.story-intro{ max-width:760px; margin:0 auto; text-align:center; }
.story-intro h2{ font-size:clamp(2.2rem,5vw,3.6rem); color:var(--wine); }
.story-intro p{ color:var(--ink-soft); margin-top:1.2rem; font-size:1.08rem; }

.chapter{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem);
  align-items:center; margin:clamp(4rem,9vw,7rem) auto 0; max-width:1100px;
}
.chapter:nth-child(even) .chapter-visual{ order:2; }
.chapter-num{
  font-family:var(--font-display); font-style:italic; font-size:1.2rem;
  color:var(--gold-text); letter-spacing:.1em;
}
.chapter h3{ font-size:clamp(1.8rem,4vw,2.8rem); color:var(--wine); margin:.6rem 0 1.1rem; }
.chapter p{ color:var(--ink-soft); font-size:1.04rem; }
.chapter p + p{ margin-top:1rem; }
.drop::first-letter{
  font-family:var(--font-display); font-size:3.6rem; float:left; line-height:.8;
  padding:.2rem .6rem 0 0; color:var(--terracotta); font-weight:600;
}
.chapter-visual{
  aspect-ratio:4/5; border-radius:2px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex; align-items:flex-end; padding:2rem; color:var(--ivory);
}
/* Fondos decorativos diferidos
   Estas fotos estan muy por debajo del pliegue, pero al ser fondos de CSS el
   navegador las pedia igual al abrir la pagina (~830 KB antes del primer
   scroll). Ahora la foto se pide solo cuando la tarjeta se acerca a la
   pantalla: main.js agrega .bg-in con 400 px de anticipacion, asi la imagen
   llega antes de que se vea y no aparece de golpe. Mientras tanto queda el
   color de fondo de base. El hero NO se difiere: es lo primero que se ve. */
.chapter-visual,.teaser::before,.org-portrait,.map-card,.testi-card{ background-color:var(--wine-deep); }
.cv-1.bg-in{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img5.jpeg") center/cover; }
.cv-2.bg-in{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img11.jpeg") center/cover; }
.chapter-visual::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M35 5 L41 29 L65 35 L41 41 L35 65 L29 41 L5 35 L29 29 Z' fill='none' stroke='%23e6cd8c' stroke-width='.4' opacity='.22'/%3E%3C/svg%3E");
  background-size:85px 85px;
}
.chapter-visual .cap{ position:relative; z-index:2; }
.chapter-visual .cap b{ font-family:var(--font-display); font-size:2.6rem; display:block; color:var(--gold-light); }
.chapter-visual .cap span{ font-family:var(--font-accent); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }

/* Cita destacada */
.pull{
  background:linear-gradient(160deg,var(--wine),var(--wine-deep));
  color:var(--ivory); text-align:center; position:relative; overflow:hidden;
}
.pull::before{
  content:"“"; font-family:var(--font-display); font-size:14rem; color:var(--gold);
  opacity:.18; position:absolute; top:-2rem; left:50%; transform:translateX(-50%);
}
.pull blockquote{ font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.8rem,4.5vw,3rem); max-width:880px; margin:0 auto; line-height:1.3; position:relative; z-index:2; }
.pull cite{ display:block; margin-top:1.8rem; font-family:var(--font-accent); font-style:normal;
  letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; color:var(--gold-light); }

/* Tarjetas teaser hacia otras páginas */
.teasers{ background:var(--cream); }
.teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; }
.teaser{
  position:relative; min-height:340px; padding:2.2rem; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--ivory); box-shadow:var(--shadow-card); transition:transform .6s var(--ease);
}
.teaser:hover{ transform:translateY(-8px); }
.teaser::before{ content:""; position:absolute; inset:0; transition:transform .8s var(--ease); }
.teaser:hover::before{ transform:scale(1.06); }
.t1.bg-in::before{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img1.jpeg") center 40%/cover; }
.t2.bg-in::before{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img6.jpeg") center/cover; }
.t3.bg-in::before{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img7.jpeg") center/cover; }
.teaser .num{ position:relative; z-index:2; font-family:var(--font-display); font-style:italic; color:var(--gold-light); font-size:1.1rem; }
.teaser h3{ position:relative; z-index:2; font-size:2rem; margin:.4rem 0 .6rem; color:var(--ivory); }
.teaser p{ position:relative; z-index:2; font-size:.92rem; color:rgba(253,248,239,.82); }
.teaser .go{ position:relative; z-index:2; margin-top:1.2rem; font-family:var(--font-accent);
  letter-spacing:.2em; text-transform:uppercase; font-size:.74rem; color:var(--gold-light);
  display:inline-flex; gap:.5rem; align-items:center; transition:gap .3s; }
.teaser:hover .go{ gap:1rem; }

/* =========================================================
   COMPONENTES de subpáginas
   ========================================================= */
/* Organizadora */
.org-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.org-portrait{
  aspect-ratio:3/4; box-shadow:var(--shadow-card); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.org-portrait.bg-in{ background:url("imagenes/img1.jpeg") center/cover; }
.org-portrait::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(230,205,140,.35);
}
.org-body h2{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--wine); }
.org-body .role{ font-family:var(--font-accent); letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold-text); font-size:.82rem; margin:.6rem 0 1.4rem; }
.org-body p{ color:var(--ink-soft); margin-bottom:1rem; font-size:1.04rem; }
.org-body .sign{ font-family:var(--font-display); font-style:italic; font-size:2rem; color:var(--terracotta); margin-top:1rem; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:3rem; }
.stat{ text-align:center; padding:1.8rem 1rem; border:1px solid rgba(30,77,57,.15); background:var(--ivory); }
.stat b{ font-family:var(--font-display); font-size:3rem; color:var(--terracotta); display:block; line-height:1; }
.stat span{ font-family:var(--font-accent); letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--ink-soft); }

/* Áreas / servicios */
.area-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:3rem; }
.area{ display:flex; gap:1.5rem; padding:2rem; background:var(--ivory); border:1px solid rgba(30,77,57,.12); transition:.4s var(--ease); }
.area:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.area .no{ font-family:var(--font-display); font-style:italic; font-size:2.4rem; color:var(--gold-deep); line-height:1; min-width:54px; }
.area h3{ font-size:1.5rem; color:var(--wine); margin-bottom:.4rem; }
.area p{ color:var(--ink-soft); font-size:.96rem; }

.region{ background:linear-gradient(160deg,var(--wine),var(--wine-deep)); color:var(--ivory); }
.region-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; }
.region h2{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--ivory); }
.region h2 em{ color:var(--gold-light); font-style:italic; }
.region p{ color:rgba(253,248,239,.82); margin-top:1.2rem; }
.zone-list{ margin-top:2rem; }
.zone-list li{ display:flex; justify-content:space-between; padding:1rem 0; border-bottom:1px solid rgba(201,162,75,.22);
  font-family:var(--font-accent); letter-spacing:.06em; }
.zone-list li span{ color:var(--gold-light); }
.map-card{
  aspect-ratio:1/1; position:relative; overflow:hidden; box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem;
}
.map-card.bg-in{ background:linear-gradient(155deg, rgba(0, 0, 0, 0.4) 100%), url("imagenes/img5.jpeg") center/cover; }
.map-card::before{ content:""; position:absolute; inset:18px; border:1px solid rgba(230,205,140,.4); }
.map-card .mk{ position:relative; z-index:2; }
.map-card .mk b{ font-family:var(--font-display); font-size:3.4rem; color:var(--gold-light); display:block; }
.map-card .mk span{ font-family:var(--font-accent); letter-spacing:.3em; text-transform:uppercase; font-size:.74rem; color:rgba(253,248,239,.85); }

/* CTA final */
.cta{ background:var(--cream); text-align:center; }
.cta h2{ font-size:clamp(2.2rem,5.5vw,3.8rem); color:var(--wine); }
.cta p{ color:var(--ink-soft); max-width:540px; margin:1.2rem auto 2rem; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact-info .kicker{ margin-bottom:.4rem; }
.contact-info h2{ font-size:clamp(2rem,5vw,3.2rem); color:var(--wine); }
.contact-info > p{ color:var(--ink-soft); margin:1rem 0 2rem; max-width:460px; }

.contact-list{ display:flex; flex-direction:column; gap:1.4rem; }
.contact-item{ display:flex; gap:1.2rem; align-items:flex-start; }
.contact-item .ci{
  width:50px; height:50px; flex-shrink:0; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep);
  transform:rotate(45deg); transition:.4s var(--ease);
}
.contact-item .ci svg{ width:22px; height:22px; transform:rotate(-45deg); }
.contact-item:hover .ci{ background:var(--gold); color:var(--wine-deep); }
.contact-item .cd span{ font-family:var(--font-accent); letter-spacing:.18em; text-transform:uppercase;
  font-size:.7rem; color:var(--gold-text); display:block; }
.contact-item .cd a,.contact-item .cd p{ font-family:var(--font-display); font-size:1.4rem; color:var(--wine); }
.contact-item .cd a:hover{ color:var(--terracotta); }

.socials{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }
.socials a{
  width:48px; height:48px; border:1px solid rgba(30,77,57,.25);
  display:flex; align-items:center; justify-content:center; color:var(--wine);
  transition:.4s var(--ease); background:var(--ivory);
}
.socials a svg{ width:20px; height:20px; }
.socials a:hover{ background:var(--wine); color:var(--gold-light); border-color:var(--wine); transform:translateY(-4px); }

.contact-card{
  background:linear-gradient(160deg,var(--wine),var(--wine-deep)); color:var(--ivory);
  padding:clamp(2rem,5vw,3rem); box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M35 6 L41 29 L64 35 L41 41 L35 64 L29 41 L6 35 L29 29 Z' fill='none' stroke='%23c9a24b' stroke-width='.4' opacity='.14'/%3E%3C/svg%3E");
  background-size:80px 80px;
}
.contact-card > *{ position:relative; z-index:2; }
.contact-card h3{ font-size:1.9rem; color:var(--ivory); }
.contact-card p.sub{ color:rgba(253,248,239,.78); margin:.6rem 0 1.8rem; font-size:.96rem; }
.field{ margin-bottom:1.2rem; }
.field label{ font-family:var(--font-accent); letter-spacing:.16em; text-transform:uppercase;
  font-size:.68rem; color:var(--gold-light); display:block; margin-bottom:.5rem; }
.field input,.field textarea,.field select{
  width:100%; background:rgba(253,248,239,.06); border:1px solid rgba(201,162,75,.3);
  color:var(--ivory); padding:.85rem 1rem; font-family:var(--font-body); font-size:.95rem;
  outline:none; transition:border-color .3s, background .3s;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(253,248,239,.62); }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold); background:rgba(253,248,239,.1); }
.field textarea{ resize:vertical; min-height:110px; }
.field select option{ background:var(--wine-deep); color:var(--ivory); }
.contact-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.field-error{
  color:#ffd9d0; font-size:.8rem; margin-top:.45rem; line-height:1.4;
}
.field input.invalido,.field textarea.invalido,.field select.invalido{
  border-color:#e8a598;
}
.form-note{ font-size:.78rem; color:rgba(253,248,239,.55); margin-top:1rem; text-align:center; }

.hours-bar{
  margin-top:3rem; display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap;
  padding:1.6rem; border-top:1px solid rgba(30,77,57,.15); border-bottom:1px solid rgba(30,77,57,.15);
}
.hours-bar div{ text-align:center; }
.hours-bar span{ font-family:var(--font-accent); letter-spacing:.16em; text-transform:uppercase;
  font-size:.68rem; color:var(--gold-text); display:block; }
.hours-bar b{ font-family:var(--font-display); font-size:1.3rem; color:var(--wine); }

/* Redes en footer */
.footer .socials{ margin-top:1rem; }
.footer .socials a{ background:transparent; border-color:rgba(201,162,75,.35); color:var(--gold-light); }
.footer .socials a:hover{ background:var(--gold); color:var(--wine-deep); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset:0; width:100%; height:100dvh; min-height:100vh;
    background:linear-gradient(160deg,var(--wine),var(--wine-deep));
    flex-direction:column; justify-content:center; align-items:center; gap:2.2rem;
    padding:5rem 2rem 3rem; margin:0;
    transform:translateX(100%); transition:transform .5s var(--ease);
    z-index:1050; opacity:0; pointer-events:none;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 6 L46 34 L74 40 L46 46 L40 74 L34 46 L6 40 L34 34 Z' fill='none' stroke='%23c9a24b' stroke-width='.4' opacity='.16'/%3E%3C/svg%3E");
    background-size:90px 90px; pointer-events:none;
  }
  .nav-links li{ position:relative; z-index:2; }
  .nav-links a{ font-size:1.35rem; opacity:1; letter-spacing:.22em; }
  .nav-links a::after{ left:50%; transform:translateX(-50%); }
  body.menu-open{ overflow:hidden; }

  .chapter,.org-grid,.region-grid{ grid-template-columns:1fr; }
  .chapter:nth-child(even) .chapter-visual{ order:0; }
  .chapter-visual{ aspect-ratio:16/10; }
  .teaser-grid,.area-grid,.contact-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }

  /* La foto de Nicole es vertical. En una sola columna la tarjeta queda
     ancha y baja, y centrada le cortaba la cara: se sube el encuadre y se
     le da mas alto para que el rostro quede por encima del texto. */
  .t1{ min-height:440px; }
  .t1.bg-in::before{ background-position:center 27%; }
}
@media(max-width:900px){
  .lang-switch{ margin-left:auto; margin-right:.8rem; }
}
@media(max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; }
  .hero-actions{ flex-direction:column; align-items:center; }
  .btn{ width:100%; justify-content:center; }
  .contact-grid{ grid-template-columns:1fr; }
  .hours-bar{ gap:1.4rem; }
  .lang-switch{ margin-left:auto; margin-right:.6rem; }
  .lang-toggle{ padding:.5rem .6rem; }

  /* Areas: con el numero al costado, la columna de texto quedaba tan
     angosta que palabras como "conceptualizacion" se salian de la
     tarjeta en pantallas de 320 px. Arriba del titulo entra bien. */
  .area{ flex-direction:column; gap:.5rem; padding:1.7rem 1.5rem; }
  .area .no{ min-width:0; font-size:2rem; }

  /* Sin el salto forzado el titulo se reparte solo en lineas parejas;
     con el salto quedaba "tu" sola en una linea. */
  .page-hero h1 br{ display:none; }
}
/* Estadisticas en pantallas muy angostas: "Tarija" a 3rem no cabia en
   media columna y empujaba la pagina 8 px hacia el costado. */
@media(max-width:400px){
  .stats{ gap:.8rem; }
  .stat{ padding:1.5rem .5rem; }
  .stat b{ font-size:2.4rem; }
}
/* iPhone agranda la pagina al tocar un campo con letra menor a 16 px y
   no la vuelve a su tamano: a 16 px el formulario no se mueve. */
@media(pointer:coarse){
  .field input,.field textarea,.field select{ font-size:16px; }
}

.brand img {
  max-height: 50px; /* Adjust this value to fit your navigation bar */
  width: auto;
  display: block;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float{
  position:fixed; z-index:900;
  right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wine-deep); color:var(--gold-light);
  border:1px solid rgba(201,162,75,.5);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float svg{ width:28px; height:28px; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(201,162,75,.35);
  animation:wa-pulse 3.4s var(--ease) infinite;
}
.wa-float:hover{
  background:var(--gold); color:var(--wine-deep);
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 16px 36px -10px rgba(0,0,0,.6);
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
/* Quien pide menos movimiento en su sistema recibe la pagina sin animaciones.
   Los !important son necesarios para ganarle a las reglas de cada componente;
   es el uso habitual y justificado de esta excepcion. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .wa-float::before{ animation:none; }
}
@media(max-width:560px){
  .wa-float{ width:50px; height:50px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* =========================================================
   AÑADIDOS · Servicios · Razones · Equipo · Carrusel · Testimonios
   (contenido según guía del cliente)
   ========================================================= */

/* Bloque introductorio "Qué es" */
.about-lead{ max-width:820px; margin:0 auto; text-align:center; }
.about-lead p{ color:var(--ink-soft); font-size:1.06rem; margin-top:1.1rem; }

/* Servicios (inicio) */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:3rem; }
.svc{ padding:2.4rem; background:var(--ivory); border:1px solid rgba(30,77,57,.12);
  border-top:2px solid var(--gold); box-shadow:var(--shadow-soft); transition:.45s var(--ease); }
.svc:hover{ transform:translateY(-6px); border-top-color:var(--terracotta); }
.svc .no{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:var(--gold-text); }
.svc h3{ font-size:1.7rem; color:var(--wine); margin:.3rem 0 .8rem; }
.svc p{ color:var(--ink-soft); font-size:1rem; }

/* Razones (¿por qué elegirnos?) */
.reasons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:3rem; }
.reason{ padding:1.8rem; background:var(--ivory); border-left:2px solid var(--gold); box-shadow:var(--shadow-soft); }
.reason h3{ font-family:var(--font-accent); font-size:1.02rem; letter-spacing:.02em; color:var(--wine);
  margin-bottom:.5rem; display:flex; gap:.6rem; align-items:baseline; }
.reason h3::before{ content:"◆"; color:var(--gold); font-size:.7rem; }
.reason p{ color:var(--ink-soft); font-size:.94rem; }

/* Equipo (organizadora) */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; }
.member{ text-align:center; padding:2.4rem 1.6rem; background:var(--ivory);
  border:1px solid rgba(30,77,57,.12); box-shadow:var(--shadow-soft); transition:.4s var(--ease); }
.member:hover{ transform:translateY(-5px); border-color:var(--gold); }
.member .avatar{ width:84px; height:84px; margin:0 auto 1.2rem; border-radius:50%;
  border:1px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:2rem; color:var(--gold-deep); }
.member h3{ font-size:1.4rem; color:var(--wine); }
.member span{ font-family:var(--font-accent); letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold-text); }
.team-note{ max-width:760px; margin:2.6rem auto 0; text-align:center; color:var(--ink-soft); font-size:1rem; }

/* Categorías de eventos con carrusel */
.ev-cat{ max-width:1000px; margin:0 auto; }
.ev-cat + .ev-cat{ margin-top:clamp(4rem,8vw,6rem); }
.ev-cat-head{ text-align:center; max-width:720px; margin:0 auto 2.4rem; }
.ev-cat-head h3{ font-size:clamp(1.8rem,4.5vw,2.8rem); color:var(--wine); }
.ev-cat-head p{ color:var(--ink-soft); margin-top:1rem; }

/* Carrusel */
.carousel{ position:relative; overflow:hidden; box-shadow:var(--shadow-card); max-width:640px; margin-inline:auto; }
.car-track{ display:flex; transition:transform .6s var(--ease); }
.car-slide{ min-width:100%; }
/* Caja cuadrada (1:1) porque la mayoría de las fotos son cuadradas:
   así se ven completas, sin recortes, y la caja queda más angosta y alta. */
.car-slide img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.car-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border:1px solid rgba(230,205,140,.6); background:rgba(16,40,29,.55);
  color:var(--gold-light); font-size:1.6rem; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:.35s var(--ease); display:flex; align-items:center; justify-content:center; }
.car-btn:hover{ background:var(--gold); color:var(--wine-deep); }
.car-btn.prev{ left:1rem; }
.car-btn.next{ right:1rem; }
.car-dots{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; }
.car-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(253,248,239,.5);
  cursor:pointer; padding:0; transition:.3s; }
.car-dots button.active{ background:var(--gold-light); transform:scale(1.3); }
/* En pantallas tactiles el punto de 9 px era casi imposible de acertar
   con el dedo: el boton pasa a 24 px y el punto se dibuja en el centro. */
@media(pointer:coarse){
  .car-dots{ gap:0; bottom:.55rem; }
  .car-dots button,.car-dots button.active{ width:24px; height:24px; background:none; transform:none; position:relative; }
  .car-dots button::before{
    content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
    border-radius:50%; background:rgba(253,248,239,.5); transition:.3s;
  }
  .car-dots button.active::before{ background:var(--gold-light); transform:scale(1.3); }
}

/* Testimonios */
.testi-section{ padding-bottom:clamp(2rem,4vw,3rem); }
.testi-section + .cta{ padding-top:clamp(2rem,4vw,3rem); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem);
  align-items:stretch; margin-top:3rem; }
.testi-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:9/16; padding:2rem 1.8rem; text-align:center; overflow:hidden;
  background-size:cover; background-position:center; box-shadow:var(--shadow-card); }
/* La tarjeta es angosta (9:16) y la foto cuadrada: centrada, a la novia
   de la segunda foto se le cortaba la cara por la izquierda. */
.testi-card--izq{ background-position:25% center; }
.testi-card::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }
.testi-card::after{ content:""; position:absolute; inset:14px; z-index:1;
  border:1px solid rgba(230,205,140,.45); pointer-events:none; }
.testi-card p,.testi-card cite{ position:relative; z-index:2; }
.testi-card p{ font-family:var(--font-display); font-style:italic; font-size:1.08rem; color:#fff; line-height:1.5; }
.testi-card cite{ display:block; margin-top:.9rem; font-family:var(--font-accent); font-style:normal;
  letter-spacing:.16em; text-transform:uppercase; font-size:.66rem; color:var(--gold); }

@media(max-width:900px){
  .svc-grid,.team-grid{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
}