/*
Theme Name: Martii UGC
Theme URI: https://martiiugc.com
Author: Deep Value Project
Description: Tema ligero a medida para el portfolio UGC de Marta Rodriguez. Sin page builder, sin dependencias de pago. Retícula 9:16 nativa y vídeo servido desde CDN externo.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: martii
*/

/* =========================================================
   ATENCION: este archivo se genero desde el prototipo v7.
   Los colores viven en :root. Cambiar ahi = cambia el sitio entero.
   Paleta aprobada por Marta:
     Buttermilk   #FFF1B5
     Pastel Blue  #C1DBE8
     Old Burgundy #43302E
   ========================================================= */

/* =========================================================
   martiiUGC.com — prototipo v3
   Color y tipografía viven en :root. Cambiar aquí = cambia todo.
   ========================================================= */
:root{
  --paper:#FDFBF4;        /* blanco calido derivado del Buttermilk */
  --butter:#FFF1B5;       /* Buttermilk  */
  --butter-soft:#FFF9E2;  /* Buttermilk diluido */
  --sky:#C1DBE8;          /* Pastel Blue */
  --sky-soft:#E7F1F6;     /* Pastel Blue diluido */
  --espresso:#43302E;     /* Old Burgundy - todo el texto */
  --stone:#7A6862;        /* secundario, derivado del burdeos */
  --line:#EBE3D4;
  --amber:#C1DBE8;        /* alias historico: apunta al azul */
  --font-display:'Poppins',system-ui,sans-serif;  /* ← aislada para cambiar titulares */
  --font-body:'Poppins',system-ui,sans-serif;
  --gap:1rem; --pad:1.25rem; --radius:14px; --max:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--espresso);
  font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--espresso); outline-offset:3px; border-radius:4px; }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stone); margin:0 0 .6rem; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:1.05; margin:0; }
.pending{ font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--stone); background:var(--butter-soft); border:1px dashed var(--line);
  padding:.15rem .4rem; border-radius:4px; white-space:nowrap; }

/* ---------- HEADER ---------- */
.site-head{ position:sticky; top:0; z-index:60; background:rgba(251,250,247,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.head-row{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.04em; background:none; border:none; cursor:pointer; padding:0; }
.brand span{ color:inherit; }
.nav{ display:none; gap:1.5rem; font-size:.9rem; font-weight:500; }
.nav button{ background:none; border:none; cursor:pointer; padding:.3rem 0; border-bottom:2px solid transparent; }
.nav button:hover{ border-bottom-color:var(--amber); }
.nav a[aria-current="page"],.nav a.current{ border-bottom-color:var(--espresso); font-weight:600; }
.nav a{ background:none; border:none; cursor:pointer; padding:.3rem 0; border-bottom:2px solid transparent; text-decoration:none; }
.nav a:hover{ border-bottom-color:var(--sky); }
.menu a{ display:block; width:100%; text-align:center; padding:.85rem 0;
  font-size:1.15rem; font-weight:500; border-bottom:none;
  text-decoration:none; }
.menu a[aria-current="page"],
.menu .current > a{ font-weight:600; }
.head-cta{ display:none; background:var(--espresso); color:var(--paper); border:none; cursor:pointer;
  font-size:.82rem; font-weight:600; padding:.55rem 1rem; border-radius:100px; }
.burger{ background:none; border:none; cursor:pointer; padding:.4rem; display:flex; flex-direction:column; gap:4px; }
.burger i{ display:block; width:22px; height:2px; background:var(--espresso); }
.menu{ display:none; padding:1rem 0 1.5rem; border-top:1px solid var(--line); }
.menu.open{ display:block; }
.menu button{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:.7rem 0; font-size:1.05rem; font-weight:500; border-bottom:1px solid var(--line); }

/* ---------- PÁGINAS ---------- */
section{ padding:3.5rem 0; }
.sec-head{ margin-bottom:1.75rem; }
.sec-head h2{ font-size:clamp(1.55rem,6.2vw,2.6rem); line-height:1.12; text-wrap:balance; }
.sec-head p{ color:var(--stone); margin:.7rem 0 0; max-width:52ch; }
.page-head{ padding-block:2.75rem .5rem; padding-inline:var(--pad); }
.page-head h1{ font-size:clamp(1.85rem,7.2vw,3.6rem); line-height:1.1;
  letter-spacing:-.03em; text-wrap:balance; }
.page-head p{ color:var(--stone); margin:.75rem 0 0; max-width:50ch; font-size:1.05rem; }

/* ---------- HERO CLARO ---------- */
.hero{ padding:2.5rem 0 3rem; }
.hero-grid{ display:grid; gap:1.75rem; align-items:center; }
.hero h1{ font-size:clamp(2rem,8.5vw,4.3rem); line-height:1.1; font-weight:700; margin:0 0 .7rem; }
.hero h1 em{ font-style:normal; color:inherit; }
.hero-line{ color:var(--stone); font-size:clamp(1.05rem,4.4vw,1.35rem);
  font-weight:300; max-width:26ch; margin:0 0 1.3rem; }
.hero-nichos{ font-size:.85rem; color:var(--stone); margin:0 0 1.5rem;
  letter-spacing:.02em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
.social{ display:flex; gap:1.1rem; margin:1.25rem 0 0; font-size:.85rem; font-weight:500; }
.social a{ text-decoration:underline; text-decoration-color:var(--sky); text-decoration-thickness:2px; text-underline-offset:4px; }
.social a:hover{ text-decoration-color:var(--espresso); }
.hero-video{ position:relative; width:100%; max-width:280px; margin:0 auto;
  aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(42,37,30,.45);
  background:radial-gradient(120% 90% at 70% 15%,#4a3f30 0,transparent 60%),
             linear-gradient(170deg,#35301f 0,#22201c 55%,#17150f 100%); }
.ph-tag{ position:absolute; z-index:2; top:.75rem; left:.75rem; font-size:.62rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; background:var(--butter); color:var(--espresso);
  padding:.28rem .5rem; border-radius:4px; }

/* ---------- BOTONES ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--espresso); color:var(--butter);
  font-weight:600; font-size:.95rem; text-decoration:none; padding:.85rem 1.5rem; border-radius:100px;
  border:none; cursor:pointer; transition:transform .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--espresso); border:1.5px solid var(--espresso); }

/* ---------- MÉTRICAS ---------- */
.metrics{ background:var(--butter); border-block:1px solid rgba(42,37,30,.1); padding:2.25rem 0; }
.metric-grid{ display:grid; gap:1.5rem; }
.metric b{ display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.1rem,9vw,2.9rem); letter-spacing:-.045em; line-height:1; }
.metric span{ display:block; font-size:.9rem; color:rgba(42,37,30,.75); margin-top:.35rem; max-width:26ch; }
.metric-note{ margin:1.75rem 0 0; font-size:.72rem; color:rgba(42,37,30,.55); }

/* ---------- MURO DE LOGOS ---------- */
.logo-wall{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:1.25rem; }
.logo-cell{ background:var(--paper); aspect-ratio:5/2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.25rem; }
.logo-cell b{ font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:-.02em; }
.logo-cell small{ font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(42,37,30,.4); }
.logo-cell.more{ background:var(--butter-soft); }
.logo-cell.more b{ color:var(--espresso); }
.logo-cell img{ max-width:65%; max-height:55%; object-fit:contain; }

/* ---------- FILTROS + REJILLA ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.filter{ flex:0 0 auto; background:transparent; cursor:pointer; border:1.5px solid var(--line);
  border-radius:100px; padding:.5rem 1.05rem; font-size:.86rem; font-weight:500;
  transition:background .15s ease,border-color .15s ease; }
.filter[aria-pressed="true"]{ background:var(--butter); border-color:var(--amber); font-weight:600; }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.card{ position:relative; display:block; width:100%; padding:0; border:none; background:none; cursor:pointer; text-align:left; }
.card-media{ position:relative; aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden;
  background:var(--butter-soft); border:1px solid var(--line); }
.card-media::after{ content:'vídeo pendiente'; position:absolute; inset:auto 0 0 0; padding:.5rem;
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); text-align:center; }
.card-media .swatch{ position:absolute; inset:0; }
.card-badge{ position:absolute; top:.5rem; left:.5rem; z-index:2; background:rgba(251,250,247,.92);
  font-size:.65rem; font-weight:600; padding:.25rem .5rem; border-radius:6px; }
.card-info{ padding:.7rem .15rem 0; }
.card-info strong{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; }
.card-info span{ font-size:.78rem; color:var(--stone); }
.card:hover .card-media{ border-color:var(--amber); }
.card[hidden]{ display:none; }

/* ---------- FOTOS ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.photo{ aspect-ratio:4/5; border-radius:var(--radius); border:1px solid var(--line);
  position:relative; overflow:hidden; }
.photo::after{ content:'foto pendiente'; position:absolute; inset:auto 0 .5rem 0; text-align:center;
  font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.photo picture{ display:block; width:100%; height:100%; }
.photo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- TESTIMONIOS ---------- */
.quotes{ display:grid; gap:1.5rem; grid-auto-rows:1fr; }
@media (min-width:760px){ .quotes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mensaje{ margin:0; display:flex; flex-direction:column; }
.mensaje[hidden]{ display:none; }
.mensaje-de{ font-size:.82rem; font-weight:600; color:var(--stone);
  margin:0 0 .4rem .3rem; }
.burbuja{ flex:1; margin:0; background:#fff; border:1px solid var(--line);
  border-radius:18px 18px 18px 4px; padding:.8rem 1rem; }
.burbuja p{ margin:0; font-size:.95rem; line-height:1.5; color:var(--espresso); }
.mensaje-sector{ font-size:.75rem; color:var(--stone); margin:.4rem 0 0 .3rem; }
.opiniones-mas{ margin-top:1.5rem; }

/* ---------- PROCESO ---------- */
.process{ background:var(--sky-soft); }
.steps{ display:grid; gap:1.5rem; }
.step{ border-top:2px solid var(--sky); padding-top:1rem; }
.step b{ font-family:var(--font-display); display:block; font-size:1.15rem; font-weight:600; margin-bottom:.35rem; }
.step p{ margin:0; color:var(--stone); font-size:.92rem; }

/* ---------- SOBRE MÍ ---------- */
.about{ display:grid; gap:2rem; }
.about-izq > .spec{ margin-top:1.5rem; }
@media (min-width:760px){
  .about{ grid-template-columns:340px 1fr; gap:3.5rem; align-items:start; }
}
@media (max-width:759px){
  .about-izq{ display:contents; }
  .about-photo{ order:1; } .about-der{ order:2; } .about-izq > .spec{ order:3; }
  .about{ display:flex; flex-direction:column; }
}
.about-photo{ aspect-ratio:4/5; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(160deg,#F7E9AE 0,#EFD9C4 100%); position:relative; }
.about-photo::after{ content:'foto pendiente'; position:absolute; inset:auto 0 1rem 0; text-align:center;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.about-der p{ color:var(--stone); font-size:1.02rem; }
.about-der p.lead{ color:var(--espresso); font-size:1.2rem; font-weight:400; }
.spec{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.65rem; font-size:.92rem; }
.spec li{ display:grid; grid-template-columns:minmax(105px,auto) 1fr;
  gap:.9rem; align-items:baseline; }
.spec b{ min-width:0; flex:none; font-weight:600; }
@media (max-width:480px){
  .spec li{ grid-template-columns:1fr; gap:.15rem; }
}
.spec span{ color:var(--stone); }
.panel{ border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; background:var(--butter-soft); }

/* ---------- CONTACTO ---------- */
.contact-cols{ display:grid; gap:2.5rem; }
.form{ display:grid; gap:1rem; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; }
.field input,.field textarea,.field select{ width:100%; font:inherit; padding:.75rem .9rem;
  border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--espresso); }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--amber); outline:none; }
.field .hint{ font-size:.75rem; color:var(--stone); margin:.3rem 0 0; }
.incl{ list-style:none; padding:0; margin:.9rem 0 0; font-size:.92rem; }
.incl li{ padding:.4rem 0 .4rem 1.4rem; position:relative; color:var(--stone); }
.incl li::before{ content:''; position:absolute; left:0; top:.9rem; width:8px; height:8px;
  border-radius:50%; background:var(--espresso); }
.incl.aparte li::before{ background:none; border:2px solid var(--espresso); width:8px; height:8px; top:.85rem; }

/* ---------- CTA + FOOTER ---------- */
.cta{ background:var(--espresso); color:var(--paper); text-align:center; }
.cta h2{ font-size:clamp(1.65rem,6.8vw,3rem); line-height:1.12; text-wrap:balance; margin-bottom:.9rem; }
.cta p{ color:rgba(251,250,247,.75); max-width:40ch; margin:0 auto 1.9rem; }
.site-foot{ background:var(--espresso); color:var(--butter);
  padding:3rem 0 2rem; border-top:1px solid rgba(255,241,181,.12); }
.pie-marca{ font-family:var(--font-display); font-weight:700;
  font-size:2.6rem; letter-spacing:-.04em; margin:0; color:var(--butter); }
.pie-frase{ margin:.4rem 0 1.5rem; color:#E7DCC8; font-size:.95rem; }
.pie-redes{ list-style:none; margin:0; padding:0; display:flex;
  flex-wrap:wrap; gap:.5rem 1.75rem; }
.pie-redes a{ display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; color:var(--butter); text-decoration:none; font-size:.95rem; }
.pie-redes a:hover{ text-decoration:underline; }
.pie-redes svg{ width:18px; height:18px; flex:0 0 auto; }
.pie-legal{ margin:1.75rem 0 0; padding-top:1rem;
  border-top:1px solid rgba(255,241,181,.15); font-size:.8rem; color:#B8A898; }

/* ---------- LIGHTBOX ---------- */
.lb[hidden]{ display:none; }
.lb{ position:fixed; inset:0; z-index:100; background:rgba(20,18,14,.96);
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.lb-box{ width:100%; max-width:960px; max-height:92svh; overflow-y:auto; }
.lb-media{ aspect-ratio:9/16; max-height:52svh; margin:0 auto 1.25rem; border-radius:var(--radius);
  overflow:hidden; background:var(--butter-soft); }
.lb-info h3{ color:var(--paper); font-size:1.5rem; margin-bottom:.15rem; }
.lb-niche{ color:var(--sky); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.lb-info dl{ margin:1.1rem 0 0; color:rgba(251,250,247,.8); font-size:.9rem; }
.lb-info dt{ font-weight:600; color:var(--paper); margin-top:.85rem; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; }
.lb-info dd{ margin:.2rem 0 0; }
.lb-close{ position:fixed; top:.85rem; right:.85rem; background:var(--paper); border:none; cursor:pointer;
  width:40px; height:40px; border-radius:50%; font-size:1.2rem; line-height:1; }

/* ---------- ESCRITORIO ---------- */
@media (min-width:760px){
  :root{ --pad:2.5rem; --gap:1.25rem; }
  .nav,.head-cta{ display:flex; }
  .burger{ display:none; }
  .menu{ display:none !important; }
  section{ padding:5.5rem 0; }
  .page-head{ padding-block:4rem .5rem; }
  .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .photo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .metric-grid{ grid-template-columns:repeat(3,1fr); gap:2.5rem; }
  .logo-wall{ grid-template-columns:repeat(4,1fr); }
  .about{ grid-template-columns:340px 1fr; gap:3.5rem; align-items:start; }
  .contact-cols{ grid-template-columns:1.15fr .85fr; gap:4rem; }
  .hero{ padding:4.5rem 0 5rem; }
  .hero-grid{ grid-template-columns:1fr 320px; gap:4.5rem; }
  .hero-video{ max-width:320px; margin:0; }
  .lb-box{ display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center; }
  .lb-media{ width:300px; max-height:78svh; margin:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Anadidos del tema (no estaban en el prototipo)
   ========================================================= */

/* El bucle se monta encima del poster, mismo encuadre */
.card-media video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media::after{ display:none; }        /* fuera el rotulo de "pendiente" */

/* Lightbox con video real */
.lb-media video{ width:100%; height:100%; object-fit:contain; background:#000; }
.lb-media.horizontal{ aspect-ratio:16/9; max-height:none; width:100%; }
@media (min-width:760px){
  .lb-media.horizontal{ width:560px; }
}

/* Formulario de Contact Form 7 con el mismo aspecto que el prototipo */
.wpcf7 form{ display:grid; gap:1rem; }
.wpcf7 label{ display:block; font-size:.82rem; font-weight:600; }
.wpcf7 input[type="text"],.wpcf7 input[type="email"],
.wpcf7 textarea,.wpcf7 select{
  width:100%; font:inherit; margin-top:.35rem; padding:.75rem .9rem;
  border:1.5px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--espresso); }
.wpcf7 textarea{ min-height:110px; resize:vertical; }
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{
  border-color:var(--espresso); outline:none; }
.wpcf7 input[type="submit"]{
  background:var(--espresso); color:var(--butter); font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:100px; border:none; cursor:pointer; }
.wpcf7 .hint,.wpcf7 .ayuda{ font-size:.75rem; color:var(--stone); margin:.3rem 0 0; }
.wpcf7-not-valid-tip{ font-size:.78rem; color:#9b2c2c; }
.wpcf7-response-output{ border:1.5px solid var(--line) !important; border-radius:10px;
  padding:.85rem 1rem !important; margin:.5rem 0 0 !important; font-size:.9rem; }

/* Gutenberg mete margen superior a todos los hijos de un contenedor menos al primero */
.grid > *, .photo-grid > *, .steps > *, .quotes > *, .metric-grid > *{
  margin-block-start:0 !important; }

/* Listas de navegacion (wp_nav_menu devuelve <ul><li>) */
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
.menu .nav-list{ display:block; }
.nav-list li{ margin:0; }

/* Contenido de entradas y paginas sueltas (index.php, page.php) */
.entrada{ max-width:70ch; }
.entrada h2{ font-size:1.6rem; margin:0 0 .6rem; }
.entrada p{ margin:0 0 1.1rem; }
.entrada a{ color:var(--espresso); }
.pagination,.nav-links{ margin-top:2rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.page-numbers{ padding:.4rem .8rem; border:1.5px solid var(--line);
  border-radius:100px; text-decoration:none; font-size:.9rem; }
.page-numbers.current{ background:var(--butter); border-color:var(--espresso); font-weight:600; }

/* Defensa por si wpautop se reactiva */
.wpcf7 .field > p{ margin:0; }
.wpcf7 .field br{ display:none; }
.wpcf7 .field label{ display:block; margin-bottom:.35rem; }
.wpcf7 .field .wpcf7-form-control-wrap{ display:block; }
.wpcf7 .field p.hint{ margin:.3rem 0 0; }

/* Hero en movil: el video sube a la primera pantalla y los botones
   se apilan a ancho completo. Sin max-height, que rompia el 9:16. */
.hero-actions{ display:grid; gap:.6rem; }
.hero-actions .btn{ justify-content:center; }
.social{ justify-content:center; }
.hero-meta{ margin-bottom:1.25rem; }

@media (min-width:760px){
  .hero-grid{
    grid-template-columns:1fr 320px;
    grid-template-areas:"top video" "bottom video";
    align-content:center; gap:0 4.5rem;
  }
  .hero-top{ grid-area:top; }
  .hero-bottom{ grid-area:bottom; }
  .hero-video{ grid-area:video; max-width:320px; margin:0; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; }
  .social{ justify-content:flex-start; }
}

/* ---------- FOTOS Y VIDEOS REALES ---------- */
/* Va al final a proposito: estas reglas apagan los marcadores de hueco
   ('foto pendiente', el degradado del hero) alli donde ya hay material. */

.hero-video video,
.bucle video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }

/* Caja reutilizable para un bucle fuera de la portada. Hoy la usa contacto. */
.bucle{ position:relative; width:100%; max-width:280px; margin:0 auto 1.5rem;
  aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(42,37,30,.45);
  background:linear-gradient(170deg,#35301f 0,#22201c 55%,#17150f 100%); }

.photo picture,
.about-photo picture{ display:block; height:100%; }
.photo img,
.about-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.about-photo{ overflow:hidden; }

/* Las fotos son 4:5. El hueco de 'sobre mi' estaba pensado en 9:16 y recortaria
   la foto por los lados, asi que cuando hay foto de verdad manda el 4:5. */
.about-photo.tiene-foto{ aspect-ratio:4/5; max-height:none; }

/* Donde ya hay imagen, fuera el cartel de 'foto pendiente'. */
.photo.tiene-foto::after,
.about-photo.tiene-foto::after{ content:none; }

/* El bloque del nombre crece para pesar lo mismo que el video que tiene al
   lado. A partir de 1100px y no de 760: entre medias la columna de texto se
   queda estrecha y 'Rodriguez.' no cabe en una linea. */
@media (min-width:1100px){
  .hero-grid{ grid-template-columns:1fr 340px; gap:0 5rem; }
  .hero-video{ max-width:340px; }
  .hero h1{ font-size:clamp(3.4rem,6.4vw,5.4rem); margin-bottom:.9rem; }
  .hero .eyebrow{ font-size:.8rem; }
  .hero-line{ font-size:1.55rem; max-width:24ch; margin-bottom:1.7rem; }
  .hero-meta{ gap:.55rem; margin-bottom:1.9rem; }
  .hero .chip{ font-size:.82rem; padding:.4rem .9rem; }
  .hero-actions{ gap:.9rem; }
  .hero-actions .btn{ font-size:1.02rem; padding:1rem 1.8rem; }
  .hero .social{ margin-top:1.6rem; font-size:.92rem; }
}

@media (min-width:760px){
  /* En la columna de contacto va pegado al borde, alineado con los paneles
     de debajo. Centrado se le veia el hueco a la izquierda. */
  aside .bucle{ margin-left:0; margin-right:0; }
}

.hero-video video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
html{ scroll-padding-top:70px; }

.contacto-foto{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); margin-bottom:1.25rem; }

.filtros-fila{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; margin-bottom:1.5rem; }
.filtros-fila .filters{ margin-bottom:0; flex:1 1 auto; }
.buscador{ flex:0 0 auto; }
.buscador input{ font:inherit; font-size:.88rem; width:180px;
  padding:.5rem .9rem; border:1.5px solid var(--line); border-radius:100px;
  background:var(--paper); color:var(--espresso); }
.buscador input:focus{ border-color:var(--espresso); outline:none; }
.buscador input::placeholder{ color:var(--stone); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }
.grid-vacio{ color:var(--stone); padding:2rem 0; }
.btn-enlace{ background:none; border:none; padding:0; cursor:pointer;
  font:inherit; color:var(--espresso); text-decoration:underline; }
@media (max-width:759px){
  .buscador{ flex:1 1 100%; }
  .buscador input{ width:100%; }
}

/* ---------- VISUALIZACIONES EN TARJETA ---------- */
.card-vistas{ position:absolute; bottom:.5rem; left:.5rem; z-index:2;
  background:rgba(67,48,46,.88); color:var(--butter); font-size:.68rem;
  font-weight:600; padding:.3rem .55rem; border-radius:6px; }

/* ---------- TIRA DE MARCAS ---------- */
.marcas-marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marcas-pista{ display:flex; width:max-content;
  animation:marcas-avanzan 157s linear infinite; }
.marcas-lista{ display:flex; align-items:center; gap:5rem;
  padding:0 5rem 0 0; margin:0; list-style:none; }
.marcas-lista li{ display:flex; align-items:center; flex:0 0 auto; }
.marcas-lista img{ width:auto; display:block; height:60px; } /* la altura real la fija site.js segun la proporcion de cada logo */
@media (max-width:759px){
  .marcas-lista{ gap:3rem; padding-right:3rem; }
  .marcas-pista{ animation-duration:101s; }
}
/* Logos blancos o muy claros: sin esto no se ven sobre el fondo crema. */
.marcas-lista img.claro{ filter:brightness(0); opacity:.8; }
.marcas-marquee:hover .marcas-pista{ animation-play-state:paused; }
@keyframes marcas-avanzan{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marcas-pista{ animation:none; width:auto; }
  .marcas-lista{ flex-wrap:wrap; justify-content:center; padding:0; }
  .marcas-lista[aria-hidden="true"]{ display:none; }
}

/* ---------- POPPINS ALOJADA EN EL SITIO (subset latin) ---------- */
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url('assets/fonts/poppins-300.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/poppins-700.woff2') format('woff2'); }

/* ---------- ENLACES CON AREA TACTIL DE 44 PX ---------- */
.social a{ display:inline-flex; align-items:center; min-height:44px; }

/* ---------- LIGHTBOX: LLAMADA A LA ACCION ---------- */
.lb-cta{ margin-top:1.5rem; background:var(--butter); color:var(--espresso); }
.lb-info dl:empty{ display:none; }