/*
 * Escribanía Sengiali — css/styles.css
 * Concepto: "Instrumento notarial". Sistema de diseño fiel a referencia/instrumento.html.
 */

/* ===== VARIABLES ===== */
:root {
  --bond:     #E9E7DE;   /* papel de obra */
  --bond-hi:  #F1EFE7;
  --ink:      #1C1B16;
  --ink-soft: #413E35;
  --mut:      #45423A;
  --rule:     #3A587D;   /* azul pizarra — acento */
  --wax:      #28405C;   /* azul profundo — hover / selección */
  --line:     rgba(28, 27, 22, .18);
  --line-2:   rgba(28, 27, 22, .10);
  --mg:       104px;     /* ancho columna de folios */
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--bond);
  color: var(--ink);
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wax); color: var(--bond-hi); }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }

/* ===== TIPOGRAFÍA ===== */
.disp   { font-family: 'EB Garamond', Georgia, serif; font-weight: 600; line-height: 1.02; letter-spacing: .002em; }
.mono   { font-family: 'Courier Prime', monospace; }
.lbl    { font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.accent { color: var(--rule); }

/* ===== CONTENEDOR ===== */
.page { max-width: 1140px; margin: 0 auto; padding: 0 26px; }

/* ===== ACCESIBILIDAD ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===== MASTHEAD ===== */
.mast              { background: var(--rule); }
.mast-row          { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 20px; flex-wrap: wrap; }
.brand             { display: block; line-height: 0; }
.brand-logo        { height: auto; width: clamp(170px, 22vw, 220px); max-width: 480px; display: block; }
.mast-reg          { font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #D8DCE2; }
.brand:focus-visible { outline: 2px solid #D8DCE2; outline-offset: 4px; }
.mast-right        { display: flex; align-items: center; gap: 16px; }

/* ===== MENÚ MÓVIL (HAMBURGUESA) ===== */
.nav-toggle        { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; padding: 0; cursor: pointer; flex: none; }
.nav-toggle:focus-visible { outline: 2px solid #D8DCE2; outline-offset: 3px; }
.nav-toggle .ico-close     { display: none; }
.nav-toggle.open .ico-burger { display: none; }
.nav-toggle.open .ico-close  { display: block; }

/* ===== NAVEGACIÓN ===== */
.subnav            { display: flex; gap: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.subnav a          { font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 11px 22px 11px 0; }
.subnav a:hover    { color: var(--rule); }
.subnav a:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }
.subnav a[aria-current="page"] { color: var(--rule); border-bottom: 1px solid var(--rule); }
.subnav a + a      { padding-left: 22px; border-left: 1px solid var(--line); }
.subnav .spacer    { flex: 1; }
.subnav .call      { color: var(--rule); border-left: 1px solid var(--line); padding-left: 22px; }

/* ===== HOJA FOLIADA ===== */
.leaf         { display: grid; grid-template-columns: var(--mg) 1fr; }
.leaf > .mgn  { padding: 38px 20px 38px 0; text-align: right; }
.leaf > .ct   { border-left: 2px solid var(--rule); padding: 38px 0 38px 42px; min-width: 0; }
.fol          { font-family: 'Courier Prime', monospace; font-size: 12px; color: var(--rule); letter-spacing: .05em; white-space: nowrap; }
.nota         { font-family: 'Courier Prime', monospace; font-size: 11px; color: var(--mut); line-height: 1.55; margin-top: 20px; }
.nota b       { color: var(--ink-soft); font-weight: 400; display: block; }

/* ===== HERO / ENCABEZAMIENTO ===== */
.hero .ct          { padding-top: 64px; padding-bottom: 70px; }
.hero .kicker      { margin-bottom: 26px; }
.damos             { font-family: 'EB Garamond', serif; font-weight: 700; font-size: clamp(78px, 15.5vw, 180px); line-height: .86; letter-spacing: -.01em; color: var(--rule); }
.damos .fe         { color: var(--rule); font-style: normal; }
.hero .preamble    { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; margin-top: 44px; align-items: start; }
.hero .preamble p  { font-size: 19px; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.dropcap::first-letter {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: 68px; line-height: .72;
  float: left; margin: 6px 12px 0 0;
  color: var(--ink);
}
.hero .aside       { border-top: 1px solid var(--ink); padding-top: 16px; }
.hero .aside .k    { font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-top: 12px; }
.hero .aside .v    { font-size: 16px; margin-bottom: 6px; }
.hero .cta         { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; font-family: 'Courier Prime', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--rule); border-radius: 0; padding: 14px 26px; transition: background .2s; }
.hero .cta:hover   { background: var(--wax); }
.hero .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===== EMBLEMA ===== */
.foot-emblem       { width: 40px; height: 40px; flex: none; }

/* ===== PROSA / LA ESCRIBANÍA ===== */
h2.head       { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; margin-bottom: 8px; color: var(--rule); }
h1.head       { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; margin-bottom: 8px; color: var(--rule); }
h1.head, h2.head, .damos { text-wrap: balance; }
.escr .ct     { padding-top: 60px; padding-bottom: 60px; }
.escr .cols   { columns: 2; column-gap: 44px; margin-top: 26px; }
.escr .cols p { margin-bottom: 16px; break-inside: avoid; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.escr .lead   { font-family: 'Libre Caslon Text', serif; font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink-soft); max-width: 30ch; }
.escr .cols strong { font-weight: 700; }
.escr .ct > p:not(.lead) { margin-top: 24px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ===== EL ESTUDIO: FOTOS DE OFICINA ===== */
.oficina-hero figure, .oficina-grid figure { margin: 0; }
.oficina-hero .frame, .oficina-grid .frame {
  width: 100%;
  border: 1px solid rgba(28,27,22,.35);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, rgba(28,27,22,.04) 0 4px, transparent 4px 8px), var(--bond-hi);
}
.oficina-hero .frame img, .oficina-grid .frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.03); display: block; }
.oficina-hero figcaption, .oficina-grid figcaption { margin-top: 10px; font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }

.oficina-hero      { margin-top: 28px; }
.oficina-hero .frame { aspect-ratio: 16 / 9; }

.oficina-grid      { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.oficina-grid .frame { aspect-ratio: 3 / 2; }

/* ===== SERVICIOS: REGISTRO / ÍNDICE ===== */
.serv .ct          { padding-top: 56px; padding-bottom: 56px; }
.reg-aviso {
  margin-top: 22px;
  padding: 14px 18px;
  border-left: 2px solid var(--rule);
  background: var(--bond-hi);
  font-family: 'Courier Prime', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.reg               { margin-top: 22px; border-top: 1px solid var(--ink); }
.reg .item         { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: padding .2s; }
.reg .item:hover   { padding-left: 10px; }
.reg .item .no     { font-family: 'Courier Prime', monospace; font-size: 12px; color: var(--rule); }
.reg .item .ttl    { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.reg .item h3      { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 26px; color: var(--rule); }
.reg .item .dsc    { font-size: 14.5px; color: var(--mut); line-height: 1.5; flex: 1; min-width: 240px; max-width: 52ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Documentación orientativa (desplegable nativo) */
.reg .item .doc               { grid-column: 2; align-self: start; margin-top: 12px; }
.reg .item .doc summary       {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Courier Prime', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rule);
  list-style: none;
}
.reg .item .doc summary::-webkit-details-marker { display: none; }
.reg .item .doc summary::marker                 { content: ''; }
.reg .item .doc summary::before {
  content: '+';
  width: 12px;
  text-align: center;
  font-size: 13px;
}
.reg .item .doc[open] summary::before { content: '–'; }
.reg .item .doc summary:hover         { color: var(--wax); }
.reg .item .doc summary:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }
.reg .item .doc .doc-body {
  margin-top: 10px;
  padding: 12px 16px;
  border-left: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mut);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ===== ESCRIBANOS: FIRMANTES ===== */
.firm .ct          { padding-top: 56px; padding-bottom: 56px; }
.sig               { margin-top: 24px; border-top: 1px solid var(--ink); }
.sig .one          { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.sig .por          {
  width: 280px; max-width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  overflow: hidden; flex: none; position: relative;
  background: repeating-linear-gradient(45deg, rgba(28,27,22,.04) 0 4px, transparent 4px 8px), var(--bond-hi);
  display: grid; place-items: center;
}
.sig .por img      { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(.3) contrast(1.03); display: block; }
.sig .ini          { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 54px; color: var(--ink); letter-spacing: -2px; line-height: 1; }
.sig .who h3       { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 28px; line-height: 1; color: var(--rule); }
.sig .who .role    { font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rule); margin: 8px 0; }
.sig .who p        { font-size: 14.5px; color: var(--mut); max-width: 56ch; line-height: 1.5; }

/* ===== CLIENTES ===== */
.clientes-panel{ background:#3A587D; padding:28px 32px; }
.clientes-titulo{ font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; color:#D8DCE2; }
.clientes-sub{ font-size: 16px; line-height: 1.5; max-width: 56ch; color:#D8DCE2; opacity:.85; margin-top:6px; }

.client-logos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:22px;
}
@media(max-width:780px){ .client-logos{ grid-template-columns:repeat(2,1fr); } }

.client-cell{                       /* tile en azul, como los recuadros de la referencia */
  background:rgba(255,255,255,.05);
  border:1px solid rgba(205,211,219,.22);
  display:flex; align-items:center; justify-content:center;
  padding:14px 18px;
  min-height:64px;
  transition:background .2s, border-color .2s;
}
.client-cell:hover{ background:rgba(255,255,255,.10); border-color:rgba(205,211,219,.45); }

.client-logo{
  display:block;
  width:100%; height:30px;
  background:#CDD3DB;               /* plateado */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  opacity:.8;                      /* apagado como la referencia; se aviva al hover */
  transition:opacity .2s, background .2s;
}
.client-cell:hover .client-logo{ opacity:1; background:#E9E7DE; }
.client-logo--tall{ height:46px; }
.client-logo--sm{ height:24px; }

/* ===== CONTACTO ===== */
.cont .ct          { padding-top: 56px; padding-bottom: 56px; }
.cgrid             { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 26px; align-items: start; }
.cblock .cdat      { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; }
.cblock .cdat:first-child { margin-top: 0; }
.cblock .cico      { flex: none; margin-top: 4px; }
.cblock .v         { font-size: 18px; }
.cblock .v a       { border-bottom: 1px solid var(--line); }
.cblock .v a:hover { border-color: var(--rule); color: var(--rule); }
.cblock .v a:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }

.mapa              { margin-top: 26px; border: 1px solid rgba(28,27,22,.35); overflow: hidden; }
.mapa iframe        { display: block; width: 100%; height: 360px; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .3s; }
.mapa:hover iframe,
.mapa:focus-within iframe { filter: grayscale(0); }

.hp                { position: absolute; left: -9999px; top: -9999px; }

.alert             { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line); background: var(--bond-hi); font-size: 15px; line-height: 1.5; }
.alert.success     { border-color: var(--rule); color: var(--ink); }
.alert.error       { border-color: var(--ink); color: var(--ink); }

form .frow         { margin-bottom: 20px; }
form label         { display: block; font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 7px; }
form input,
form textarea      { width: 100%; background: var(--bond-hi); border: 1px solid rgba(28,27,22,.35); color: var(--ink); padding: 12px 14px; font-family: 'Libre Caslon Text', serif; font-size: 16px; border-radius: 0; }
form input:focus,
form textarea:focus { outline: 2px solid var(--rule); outline-offset: -1px; border-color: transparent; }
form textarea      { resize: vertical; min-height: 104px; }
form button        { background: var(--rule); color: var(--bond-hi); border: 0; padding: 14px 30px; font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
form button:hover  { background: var(--wax); }
form button:focus-visible { outline: 2px solid var(--rule); outline-offset: 3px; }

/* ===== FOOTER ===== */
footer        { border-top: 2px solid var(--ink); margin-top: 10px; }
.close        { padding: 40px 0 20px; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.fbrand       { display: flex; align-items: center; gap: 14px; }
.fbrand .fname { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 20px; letter-spacing: .02em; }
.fbrand .freg { margin-top: 4px; }
.close .stamp { font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.close .stamp .sline { display: flex; align-items: center; gap: 8px; }
.close .stamp a { border-bottom: 1px solid var(--line); }
.close .stamp a:hover { color: var(--rule); border-color: var(--rule); }
.close .stamp a:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }
.fbar         { border-top: 1px solid var(--line); padding: 16px 0 30px; font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .06em; color: var(--mut); text-transform: uppercase; }

/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rule);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(28,27,22,.28);
  z-index: 999;
  transition: background .2s;
}
.whatsapp-float:hover { background: var(--wax); }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===== ANIMACIÓN REVEAL (progressive enhancement: visible sin JS) ===== */
.js .reveal      { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s; }
.js .reveal.in   { opacity: 1; transform: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .oficina-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .oficina-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  :root { --mg: 0px; }
  .leaf { grid-template-columns: 1fr; }
  .leaf > .mgn  { text-align: left; padding: 26px 0 0; display: flex; gap: 20px; align-items: baseline; }
  .leaf > .ct   { border-left: 0; padding-left: 0; padding-top: 14px; border-top: 2px solid var(--rule); }
  .hero .preamble, .cgrid { grid-template-columns: 1fr; gap: 28px; }
  .escr .cols   { columns: 1; }
  .sig .one     { grid-template-columns: 1fr; }
  .sig .por     { width: 100%; max-width: 280px; }

  .nav-toggle   { display: flex; }
  .subnav       {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bond);
    border: 1px solid var(--line);
    margin-top: 4px;
    opacity: 0;
    transition: opacity .2s ease, display .2s allow-discrete;
  }
  .subnav.open  { display: flex; opacity: 1; }
  @starting-style { .subnav.open { opacity: 0; } }
  .subnav a     { padding: 13px 20px; min-height: 44px; display: flex; align-items: center; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .subnav a + a { padding-left: 20px; border-left: 0; }
  .subnav .spacer { display: none; }
  .subnav .call { border-left: 0; border-top: 1px solid var(--line); padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .subnav     { transition: none; }
  .mapa iframe { transition: none; }
}