@charset "UTF-8";
/* ==========================================================================
   BORNACELLI PEZZANO SALUD LEGAL
   Dirección: RAÍL
   ----------------------------------------------------------------------------
   Una retícula asimétrica persistente: raíl izquierdo con el número y el
   rótulo de la sección, contenido denso a la derecha. La misma estructura en
   toda la página. Densidad cómoda, sin vacíos ni tipografía diminuta.
   Navy estructural · blanco y gris muy claro como soporte · dorado de acento.
   ========================================================================== */

:root {
  --navy:      #00214E;
  --navy-900:  #001836;
  --navy-800:  #062A5C;
  --navy-600:  #23548F;
  --navy-300:  #8FA9C8;
  --navy-200:  #BACBDF;
  --navy-100:  #DFE7F0;

  --oro:       #C38B34;
  --oro-claro: #E0BE87;
  --oro-texto: #8A6220;

  --tinta:     #1F2A36;
  --gris:      #55636F;
  --gris-tenue:#7D8A96;
  --lienzo:    #FFFFFF;
  --lienzo-2:  #F5F7FA;
  --borde:     #DFE4EB;
  --borde-osc: rgba(255,255,255,.14);

  --wa: #25D366;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --f-micro: .75rem;
  --f-nota:  .9375rem;
  --f-base:  1.125rem;
  --f-med:   1.25rem;
  --f-lead:  clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --f-h3:    clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --f-h2:    clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  --f-h1:    clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);

  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem;
  --e5:1.5rem; --e6:2rem;  --e7:2.75rem; --e8:4rem;
  --e9:5.5rem; --e10:7.5rem;

  --marco: 1280px;
  --canal: clamp(1.25rem, 4vw, 3.5rem);

  --r: 3px;
  --ease: cubic-bezier(.25,.8,.35,1);
  --t: 300ms var(--ease);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: var(--sans); font-size: var(--f-base); line-height: 1.65;
  color: var(--tinta); background: var(--lienzo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img,svg { display: block; max-width: 100%; height: auto; }
button,input,textarea,select { font: inherit; color: inherit; }
a { color: var(--oro-texto); text-underline-offset: .18em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
::selection { background: var(--navy); color: #fff; }

.salto { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.salto:focus {
  position:fixed; inset:0 auto auto 0; z-index:200; width:auto; height:auto;
  margin:0; clip-path:none; background:var(--navy); color:#fff;
  padding:var(--e4) var(--e5); font-weight:600; text-decoration:none;
}

/* ── tipografía ───────────────────────────────────────────────────────── */
h1,h2 { font-family: var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.02em; color: var(--navy); text-wrap: balance; }
h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-family: var(--sans); font-size: var(--f-h3); font-weight:600; line-height:1.25; letter-spacing:-.014em; color: var(--navy); }
.lead { font-size: var(--f-lead); line-height:1.55; color: var(--gris); }
.sobre-navy { color: var(--navy-200); }
.sobre-navy h1,.sobre-navy h2,.sobre-navy h3 { color:#fff; }
.sobre-navy .lead { color: var(--navy-200); }

/* ── marco y raíl: la estructura de toda la página ────────────────────── */
.marco { width:100%; max-width:var(--marco); margin-inline:auto; padding-inline:var(--canal); }

.seccion { padding-block: clamp(var(--e8), 7vw, var(--e10)); position:relative; }
.seccion--gris  { background: var(--lienzo-2); }
.seccion--navy  { background: var(--navy); }
.seccion--fondo { background: var(--navy-900); }

.rejilla { display:grid; gap: var(--e6); }
@media (min-width: 940px) {
  .rejilla { grid-template-columns: 250px minmax(0,1fr); gap: var(--e9); align-items:start; }
  .rail { position: sticky; top: 124px; }
}

.rail__n {
  font-family: var(--serif); font-size:2.25rem; font-weight:600; line-height:1;
  color: var(--oro-texto); display:block; margin-bottom: var(--e3);   /* 5.46:1 */
}
.rail__t {
  font-size: var(--f-micro); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color: var(--gris); display:block;
}
.sobre-navy .rail__n { color: var(--oro-claro); }
.sobre-navy .rail__t { color: var(--navy-300); }
.rail__d { margin-top: var(--e5); font-size: var(--f-nota); color: var(--gris); }
.sobre-navy .rail__d { color: var(--navy-200); }

/* ── botones ──────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e3);
  min-height:56px; padding: var(--e4) var(--e6);
  font-size: var(--f-nota); font-weight:600; letter-spacing:.02em; line-height:1;
  text-decoration:none; cursor:pointer; border-radius: var(--r);
  color:#fff; background: var(--navy); border:1px solid var(--navy);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); color:#fff; }
.btn svg { width:19px; height:19px; flex:none; }

.btn--linea { background:transparent; color: var(--navy); border-color: var(--borde); }
.btn--linea:hover { background:transparent; color: var(--navy); border-color: var(--oro); }

.btn--oro { background: var(--oro); border-color: var(--oro); color: var(--navy-900); }
.btn--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--navy-900); }

.sobre-navy .btn--linea { color:#fff; border-color: var(--borde-osc); }
.sobre-navy .btn--linea:hover { border-color: var(--oro); color:#fff; }

.acciones { display:flex; flex-wrap:wrap; gap: var(--e4); }

/* ── cabecera ─────────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:90; background: var(--navy); }
.cab__f { display:flex; align-items:center; justify-content:space-between; gap: var(--e5); min-height:84px; }
.logo { display:flex; align-items:center; gap: var(--e3); text-decoration:none; flex:none; }
.logo img { width:52px; height:52px; }
.logo__t { display:flex; flex-direction:column; line-height:1.08; }
.logo__n { font-family:var(--serif); font-size:1.25rem; font-weight:600; color:#fff; letter-spacing:.01em; white-space:nowrap; }
.logo__s { font-size:.5625rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--oro-claro); margin-top:4px; white-space:nowrap; }

.nav { display:none; }
.nav a { color:#fff; text-decoration:none; }
.cab__cta { display:none; }

.burger { display:grid; place-items:center; width:48px; height:48px; padding:0; background:none; border:1px solid var(--borde-osc); border-radius:var(--r); cursor:pointer; }
.burger:hover { border-color: var(--oro); }
.burger i { display:block; width:19px; height:1.5px; background:#fff; transition: transform var(--t), opacity var(--t); }
.burger i:nth-child(1){ grid-area:1/1; transform:translateY(-6px); }
.burger i:nth-child(2){ grid-area:1/1; }
.burger i:nth-child(3){ grid-area:1/1; transform:translateY(6px); }
body[data-menu="1"] .burger i:nth-child(1){ transform:rotate(45deg); }
body[data-menu="1"] .burger i:nth-child(2){ opacity:0; }
body[data-menu="1"] .burger i:nth-child(3){ transform:rotate(-45deg); }

.panel {
  position:fixed; inset:84px 0 0; z-index:88; background: var(--navy);
  padding: var(--e6) var(--canal) var(--e8); display:flex; flex-direction:column;
  overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
body[data-menu="1"]{ overflow:hidden; }
body[data-menu="1"] .panel { opacity:1; visibility:visible; transform:none; }
.panel a.pa {
  display:flex; align-items:baseline; gap:var(--e4); padding-block: var(--e4);
  font-family: var(--serif); font-size:1.875rem; font-weight:600; color:#fff;
  text-decoration:none; border-bottom:1px solid var(--borde-osc);
}
.panel a.pa span { font-family:var(--sans); font-size:.625rem; font-weight:600; letter-spacing:.2em; color:var(--oro); }
.panel__pie { margin-top:auto; padding-top: var(--e6); display:grid; gap: var(--e4); }
.panel__d { display:flex; align-items:center; gap:var(--e3); font-size:var(--f-nota); color:var(--navy-200); text-decoration:none; }
.panel__d svg { color: var(--oro); }

@media (min-width: 1080px) {
  .burger,.panel { display:none; }
  .cab__f { min-height:92px; }
  .logo img { width:56px; height:56px; }
  .nav { display:flex; align-items:center; gap: clamp(var(--e4),1.8vw,var(--e6)); }
  .nav a { font-size:var(--f-nota); font-weight:500; color:rgba(255,255,255,.8); text-decoration:none; white-space:nowrap; padding-block:var(--e2); border-bottom:1.5px solid transparent; transition: color var(--t), border-color var(--t); }
  .nav a:hover,.nav a[aria-current="page"] { color:#fff; border-bottom-color: var(--oro); }
  .cab__cta { display:inline-flex; flex:none; min-height:46px; padding-inline:var(--e5); background:var(--oro); border-color:var(--oro); color:var(--navy-900); }
  .cab__cta:hover { background:var(--oro-claro); border-color:var(--oro-claro); color:var(--navy-900); }
}

/* ── 01 · hero ────────────────────────────────────────────────────────── */
.hero { position:relative; background: var(--navy); overflow:hidden; padding-block: clamp(var(--e8), 8vw, var(--e10)); }
.hero__mono { position:absolute; right:-8%; top:50%; translate:0 -50%; height:130%; width:auto; max-width:none; opacity:.06; pointer-events:none; }
.hero .marco { position:relative; z-index:1; }
.hero__marca {
  font-size: var(--f-micro); font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color: var(--oro-claro); margin-bottom: var(--e5);
}
.hero h1 { color:#fff; max-width: 15ch; }
.hero__lead { margin-top: var(--e6); max-width: 46ch; }
.hero .acciones { margin-top: var(--e7); }
.hero__datos {
  margin-top: var(--e8); padding-top: var(--e5); border-top:1px solid var(--borde-osc);
  display:flex; flex-wrap:wrap; gap: var(--e4) var(--e7); font-size: var(--f-nota); color: var(--navy-200);
}
.hero__datos b { display:inline-flex; align-items:center; gap:var(--e2); font-weight:500; }
.hero__datos svg { color: var(--oro-claro); }

/* ── 03 · en qué ayudamos: rejilla densa, sin tarjetas ───────────────── */
.ayudas { display:grid; gap:0; border-top:1px solid var(--borde); }
@media (min-width: 700px)  { .ayudas { grid-template-columns:1fr 1fr; } }
@media (min-width: 1100px) { .ayudas { grid-template-columns:repeat(3,1fr); } }
.ayuda {
  display:flex; gap: var(--e4); align-items:flex-start;
  padding: var(--e5) var(--e5) var(--e5) 0; border-bottom:1px solid var(--borde);
  transition: background var(--t);
}
@media (min-width: 700px) { .ayuda { padding-right: var(--e6); } }
.ayuda:hover { background: rgba(195,139,52,.055); }
.ayuda svg { color: var(--oro); flex:none; margin-top:2px; }
.ayuda span { font-size: var(--f-med); color: var(--navy); font-weight:500; line-height:1.3; }

/* ── 04 · servicios: lista numerada, densa y escaneable ──────────────── */
.servicios { border-top:2px solid var(--navy); }
.serv {
  display:grid; gap: var(--e3);
  padding-block: var(--e6); border-bottom:1px solid var(--borde);
  transition: background var(--t);
}
.serv:hover { background: var(--lienzo); }
.seccion--gris .serv:hover { background: #fff; }
.serv__n { font-family:var(--serif); font-size:1.75rem; font-weight:600; line-height:1; color:var(--oro); }
.serv h3 { font-family: var(--serif); font-size: clamp(1.375rem,1.1rem+1.1vw,1.875rem); font-weight:600; letter-spacing:-.016em; line-height:1.12; }
.serv p { color: var(--gris); font-size: var(--f-nota); max-width: 62ch; }
@media (min-width: 880px) {
  .serv { grid-template-columns: 72px minmax(0,1fr) minmax(0,1.25fr); gap: var(--e6); align-items:baseline; }
  .serv__n { grid-row:1; }
  .serv h3 { grid-row:1; }
  .serv p  { grid-row:1; }
}

/* ── 05 · proceso: cuatro pasos ─────────────────────────────────────── */
.pasos { display:grid; gap: var(--e6); }
@media (min-width: 860px) { .pasos { grid-template-columns:repeat(4,1fr); gap: var(--e5); } }
.paso { padding-top: var(--e5); border-top:2px solid var(--oro); }
.paso__n { font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; color:var(--oro-claro); display:block; margin-bottom:var(--e3); }
.paso h3 { color:#fff; }
.paso p { margin-top: var(--e3); font-size: var(--f-nota); color: var(--navy-200); }

/* ── 06 · por qué ─────────────────────────────────────────────────────── */
.razones { display:grid; gap: var(--e5); }
@media (min-width: 760px) { .razones { grid-template-columns:1fr 1fr; gap: var(--e5) var(--e7); } }
.razon { display:flex; gap: var(--e4); align-items:flex-start; padding-block: var(--e4); }
.razon svg { color: var(--oro); flex:none; margin-top:3px; }
.razon strong { display:block; font-size: var(--f-med); color: var(--navy); font-weight:600; margin-bottom:var(--e1); }
.razon span span { font-size: var(--f-nota); color: var(--gris); }

/* ── 07 · faq ─────────────────────────────────────────────────────────── */
.faq { border-top:1px solid var(--borde); }
.faq details { border-bottom:1px solid var(--borde); }
.faq summary {
  display:flex; align-items:flex-start; justify-content:space-between; gap: var(--e5);
  padding-block: var(--e5); cursor:pointer; list-style:none;
  font-size: var(--f-med); font-weight:600; color: var(--navy); line-height:1.35;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color: var(--oro-texto); }
.faq summary::after { content:"+"; flex:none; font-weight:400; font-size:1.5rem; line-height:1; color:var(--oro); transition: transform var(--t); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__r { padding-bottom: var(--e5); max-width: 66ch; color: var(--gris); font-size: var(--f-nota); }
.faq__r p + p { margin-top: var(--e4); }

/* ── 08 · cierre y formulario ─────────────────────────────────────────── */
.cierre { position:relative; overflow:hidden; }
.cierre__mono { position:absolute; left:-12%; bottom:-25%; height:135%; width:auto; max-width:none; opacity:.05; pointer-events:none; }
.cierre .marco { position:relative; z-index:1; }
.contacto { display:grid; gap: var(--e8); }
@media (min-width: 980px) { .contacto { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--e9); align-items:start; } }

.canales { list-style:none; padding:0; margin-top: var(--e7); display:grid; gap: var(--e5); }
.canales li { display:flex; gap: var(--e4); align-items:flex-start; }
.canales svg { color: var(--oro); flex:none; margin-top:3px; }
.canales strong { display:block; font-size:var(--f-micro); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--navy-300); margin-bottom:var(--e1); }
.canales a, .canales .v { font-size: var(--f-med); color:#fff; text-decoration:none; }
.canales a:hover { color: var(--oro-claro); }

.forma { display:grid; gap: var(--e5); }
@media (min-width: 700px) { .forma__2 { display:grid; grid-template-columns:1fr 1fr; gap: var(--e5); } }
.campo { display:grid; gap: var(--e2); }
.campo label { font-size:var(--f-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300); }
.campo input,.campo select,.campo textarea {
  width:100%; min-height:54px; padding: var(--e3) var(--e4);
  background: rgba(255,255,255,.05); color:#fff;
  border:1px solid var(--borde-osc); border-radius: var(--r);
  font-size: var(--f-base); transition: border-color var(--t), background var(--t);
}
.campo select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),linear-gradient(135deg,var(--oro) 50%,transparent 50%); background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right: var(--e8); }
.campo select option { background:#fff; color: var(--tinta); }   /* el panel nativo hereda el fondo del control */
.campo textarea { min-height:132px; resize:vertical; line-height:1.6; }
.campo input:focus,.campo select:focus,.campo textarea:focus { outline:none; border-color: var(--oro); background: rgba(255,255,255,.08); }
.campo input::placeholder,.campo textarea::placeholder { color: var(--navy-300); }
.campo__ayuda { font-size: var(--f-nota); color: var(--navy-300); }
.campo--error input,.campo--error select,.campo--error textarea { border-color:#E4796F; }
.campo__error { font-size: var(--f-nota); color:#F0A79F; }

.consent { display:flex; gap: var(--e3); align-items:flex-start; }
.consent input { width:22px; height:22px; flex:none; margin-top:2px; accent-color: var(--oro); }
.consent label { font-size: var(--f-nota); color: var(--navy-200); line-height:1.5; }
.consent a { color: var(--oro-claro); }
.trampa { position:absolute !important; left:-9999px !important; height:0; overflow:hidden; }

.aviso { padding: var(--e5); font-size: var(--f-nota); border-radius: var(--r); border-left:3px solid var(--oro); background: rgba(195,139,52,.12); color:#fff; }
.aviso a { color: var(--oro-claro); }
.aviso--error { border-left-color:#E4796F; background: rgba(228,121,111,.14); }

/* ── whatsapp flotante ────────────────────────────────────────────────── */
.wa {
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px); z-index:85;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background: var(--wa); color:#fff; text-decoration:none;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.42); transition: transform var(--t);
}
.wa:hover { transform: translateY(-2px); color:#fff; }
.wa svg { width:29px; height:29px; fill:currentColor; }
.wa b { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ── pie ──────────────────────────────────────────────────────────────── */
.pie { background: var(--navy-900); color: var(--navy-200); font-size: var(--f-nota);
       padding-block: var(--e8) calc(var(--e5) + 76px); }  /* el flotante no tapa el crédito */
.pie__r { display:grid; gap: var(--e7); }
@media (min-width: 820px) { .pie__r { grid-template-columns:1.7fr 1fr 1fr; gap: var(--e8); } }
.pie__logo { width:70px; height:70px; margin-bottom: var(--e4); }
.pie h4 { font-family:var(--sans); font-size:var(--f-micro); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-claro); margin-bottom:var(--e4); }
.pie ul { list-style:none; padding:0; display:grid; }
.pie ul a,.pie ul li { color:var(--navy-200); text-decoration:none; display:block; padding-block:var(--e2); }
.pie a { color: var(--navy-200); text-decoration:none; }
.pie a:hover { color: var(--oro-claro); }
.pie__n { font-size:var(--f-nota); color:var(--navy-300); line-height:1.6; max-width:44ch; margin-top:var(--e4); }
.pie__l { margin-top: var(--e8); padding-top: var(--e5); border-top:1px solid var(--borde-osc); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--e4); font-size:var(--f-micro); color:var(--navy-300); }
.pie__c a { color:var(--navy-300); border-bottom:1px solid rgba(195,139,52,.4); }
.pie__c a:hover { color: var(--oro-claro); }

/* ── páginas legales ──────────────────────────────────────────────────── */
.portada { background: var(--navy); padding-block: clamp(var(--e7),6vw,var(--e9)); }
.portada h1 { color:#fff; }
.miga { font-size:var(--f-nota); color:var(--navy-300); margin-bottom:var(--e4); }
.miga a { color: var(--oro-claro); text-decoration:none; }
.doc { max-width: 66ch; }
.doc h2 { font-family:var(--sans); font-size:1.25rem; font-weight:600; margin-top:var(--e7); margin-bottom:var(--e3); }
.doc p,.doc li { font-size: var(--f-nota); }
.doc p + p { margin-top: var(--e4); }
.doc ul { margin-top:var(--e3); padding-left:var(--e5); display:grid; gap:var(--e2); }
.marcador { background: var(--lienzo-2); border-left:3px solid var(--oro); padding:var(--e5); margin-block:var(--e6); font-size:var(--f-nota); color:var(--oro-texto); }
.marcador strong { color:var(--navy); display:block; margin-bottom:var(--e2); }

/* ── microinteracción ─────────────────────────────────────────────────── */
/* El contenido nunca depende del JS para ser visible. La aparición sólo se
   activa si el propio script marca el documento, y aun así nunca oculta nada
   más de lo imprescindible. */
html.js [data-rev]{ opacity:0; transform:translateY(12px); }
html.js [data-rev].on{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  [data-rev]{ opacity:1; transform:none; }
}

/* ── retrato del hero: aparece sólo si el archivo existe ─────────────────
   El hero funciona igual sin él; con foto pasa a dos columnas. La foto se
   estira a la altura del bloque de texto para que sus bordes superior e
   inferior coincidan con los de la columna izquierda.                    */
.hero__rejilla { display:grid; gap: var(--e7); align-items:center; }
@media (min-width: 980px) {
  .hero__rejilla--foto {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--e8);
    align-items: start;
  }
  /* La foto arranca a la altura del titular, no del antetítulo:
     se desplaza la altura de línea del antetítulo más su margen. */
  .hero__rejilla--foto .hero__foto {
    margin-top: calc(var(--f-micro) * 1.65 + var(--e5));
  }
}
.hero__foto { margin:0; position:relative; }
.hero__foto img {
  width:100%; height:auto; display:block; border-radius: var(--r);
  aspect-ratio: 1/1; object-fit: cover; object-position: center 36%;
}
/* Filete dorado desplazado: el mismo gesto de acento del resto del sitio */
.hero__foto::after {
  content:""; position:absolute; inset:auto -10px -10px auto;
  width:64%; height:44%; border-right:2px solid var(--oro); border-bottom:2px solid var(--oro);
  border-radius:0 0 var(--r) 0; pointer-events:none;
}
@media (max-width: 979px) {
  .hero__foto { margin-top: var(--e6); }
  .hero__foto::after { inset:auto -6px -6px auto; }
}

/* Pie de foto del hero */
.hero__foto figcaption {
  margin-top: var(--e4); font-size: var(--f-nota); font-weight: 500;
  letter-spacing: .01em; color: #fff;
}
.hero__foto figcaption::before {
  content: ""; display: inline-block; width: 22px; height: 1px;
  background: var(--oro); vertical-align: middle; margin-right: var(--e3);
}