/* ==========================================================================
   LINE & BEAUTY — Rama 01 del sistema Dr. Isidro Guerra
   Paleta y proporciones tomadas del manual de marca:
   Azul Guerra 45 % · Teal Quirúrgico 30 % · Cobalto Científico 15 %.
   El oro existe solo como filamento, nunca como superficie.
   ========================================================================== */

:root{
  /* --- marca madre --- */
  --azul:#17324D;          /* Azul Guerra */
  --marfil:#F5F1E8;        /* Marfil */
  --grafito:#20252B;       /* Grafito */

  /* --- rama 01: clínica y cirugía estética --- */
  --teal:#3F7374;          /* Teal Quirúrgico */
  --cobalto:#4267A5;       /* Cobalto Científico */

  /* --- derivados, calculados desde los tres anteriores --- */
  --azul-hondo:#0E2138;
  --azul-alto:#1F4468;
  --teal-claro:#5A9494;
  --teal-hondo:#2C5556;
  --cobalto-claro:#6A8CC4;

  /* --- tintas sobre marfil --- */
  --tinta:#1A1F26;
  --tinta-2:#4C5661;
  --tinta-3:#7C8792;

  /* --- tintas sobre azul --- */
  --sobre-azul:#EDEAE1;
  --sobre-azul-2:rgba(245,241,232,.72);
  --sobre-azul-3:rgba(245,241,232,.46);

  /* --- el filamento --- */
  --oro:#C8A97A;
  --oro-luz:#E3CB9F;
  --linea:rgba(23,50,77,.14);
  --linea-azul:rgba(200,169,122,.26);

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.22,.7,.28,1);
  --ease-suave:cubic-bezier(.34,.9,.2,1);
  --seccion:clamp(64px,8vw,132px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--teal);color:var(--marfil)}

a{color:var(--teal-hondo);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cobalto);outline-offset:3px;border-radius:2px;
}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance;letter-spacing:-.015em}

/* ==========================================================================
   El filamento de oro — un solo pelo, como en el manual
   ========================================================================== */
.filamento{
  position:absolute;inset:0;
  pointer-events:none;overflow:clip;z-index:0;
}
.filamento svg{position:absolute;right:-8%;top:-14%;width:min(58%,720px);height:auto;opacity:.5}
.filamento path{fill:none;stroke:url(#hilo);stroke-width:1.1}

/* ==========================================================================
   Tipografía de servicio
   ========================================================================== */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal);margin:0 0 18px;
}
.sobre-azul .eyebrow{color:var(--oro)}

.titulo{
  font-size:clamp(28px,4.4vw,56px);
  line-height:1.08;margin:0 0 22px;max-width:24ch;
}
.titulo em{font-style:normal;color:var(--teal)}
.sobre-azul .titulo em{color:var(--oro-luz)}

.entrada{
  font-size:clamp(17px,1.8vw,21px);
  line-height:1.62;color:var(--tinta-2);
  max-width:56ch;margin:0 0 22px;
}
.sobre-azul .entrada{color:var(--sobre-azul-2)}
.cuerpo{max-width:60ch;color:var(--tinta-2);margin:0 0 16px}
.cuerpo strong{color:var(--tinta);font-weight:600}
.sobre-azul .cuerpo{color:var(--sobre-azul-2)}
.sobre-azul .cuerpo strong{color:var(--sobre-azul)}

/* la única voz en serif: las citas */
.cita{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.4vw,30px);line-height:1.46;
  color:var(--azul);max-width:44ch;margin:0;
  padding-left:clamp(18px,2.4vw,32px);
  border-left:1px solid var(--teal);
}
.sobre-azul .cita{color:var(--sobre-azul);border-left-color:var(--oro)}

/* ==========================================================================
   Secciones: la proporción 45/30/15 se cumple alternando fondos
   ========================================================================== */
.seccion{padding-block:var(--seccion);position:relative;overflow:clip}
.sobre-azul{background:var(--azul);color:var(--sobre-azul)}
.sobre-azul-hondo{background:var(--azul-hondo);color:var(--sobre-azul)}
.sobre-grafito{background:var(--grafito);color:var(--sobre-azul)}
.sobre-teal{background:var(--teal-hondo);color:var(--sobre-azul)}
.sobre-marfil{background:var(--marfil)}
.sobre-marfil-2{background:#EFEAE0}

/* retícula de proporción: la Regla PATRICE hecha fondo */
.reticula::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(90deg, var(--linea-azul) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-azul) 0 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-azul) 0 1px, transparent 1px);
  background-size:61.8% 100%, 38.2% 100%, 23.6% 100%;
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat;
}
.seccion > .wrap{z-index:2}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.06em;
  padding:15px 30px;border-radius:2px;
  border:1px solid var(--teal);color:var(--teal-hondo);
  background:none;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-suave);
}
.btn:hover{background:var(--teal);color:var(--marfil);transform:translateY(-1px)}
.btn--solido{background:var(--azul);border-color:var(--azul);color:var(--marfil)}
.btn--solido:hover{background:var(--teal);border-color:var(--teal);color:var(--marfil)}
.sobre-azul .btn,.sobre-grafito .btn,.sobre-teal .btn{border-color:var(--oro);color:var(--oro-luz)}
.sobre-azul .btn:hover,.sobre-grafito .btn:hover,.sobre-teal .btn:hover{background:var(--oro);color:var(--azul-hondo)}
.sobre-azul .btn--solido{background:var(--oro);border-color:var(--oro);color:var(--azul-hondo)}
.sobre-azul .btn--solido:hover{background:var(--oro-luz);border-color:var(--oro-luz);color:var(--azul-hondo)}

/* ==========================================================================
   Barra
   ========================================================================== */
.barra{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--marfil) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
@supports not (color: color-mix(in srgb,red,blue)){.barra{background:var(--marfil)}}
.barra .in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.marca{display:grid;gap:1px;color:inherit}
.marca b{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.9vw,21px);letter-spacing:.02em;line-height:1.1;color:var(--azul)}
.marca small{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3)}

.menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);list-style:none;margin:0;padding:0}
.menu a{
  font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--tinta-2);
  padding-block:5px;position:relative;transition:color .35s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.menu a:hover,.menu a[aria-current="true"]{color:var(--azul)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}

.acciones{display:flex;align-items:center;gap:10px}
.idioma{display:flex;border:1px solid var(--linea);border-radius:2px;overflow:hidden}
.idioma button{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
  color:var(--tinta-3);padding:7px 11px;transition:.3s var(--ease);
}
.idioma button[aria-pressed="true"]{background:var(--azul);color:var(--marfil)}
.idioma button:not([aria-pressed="true"]):hover{color:var(--azul);background:rgba(23,50,77,.07)}

/* ==========================================================================
   Portada
   ========================================================================== */
.portada{
  position:relative;
  background:var(--azul);
  color:var(--sobre-azul);
  padding-block:clamp(76px,11vw,150px) clamp(56px,8vw,110px);
  overflow:clip;
}
.portada__foto{
  position:absolute;inset:0;z-index:0;
  background:var(--img-hero) center/cover no-repeat;
  opacity:.3;
}
.portada__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(104deg, var(--azul) 12%, rgba(23,50,77,.82) 48%, rgba(14,33,56,.62) 100%),
    radial-gradient(70% 60% at 82% 24%, rgba(66,103,165,.34), transparent 70%);
}
.portada .wrap{z-index:3}
.portada h1{
  font-size:clamp(34px,6.6vw,86px);
  line-height:1.02;letter-spacing:-.025em;
  margin:0 0 26px;max-width:18ch;
}
.portada h1 em{font-style:normal;display:block;color:var(--oro-luz)}
.portada__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,40px)}

.avales{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:clamp(34px,4.6vw,60px) 0 0;padding:20px 0 0;
  border-top:1px solid var(--linea-azul);
  list-style:none;
}
.avales li{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sobre-azul-3);
}

/* ==========================================================================
   Cuatro tiempos — es un procedimiento, el número es información
   ========================================================================== */
.tiempos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.sobre-azul .tiempos,.sobre-grafito .tiempos{background:var(--linea-azul);border-color:var(--linea-azul)}
.tiempo{background:var(--marfil);padding:clamp(22px,2.6vw,34px);transition:background .5s var(--ease)}
.sobre-azul .tiempo,.sobre-grafito .tiempo{background:var(--azul)}
.tiempo:hover{background:#EFEAE0}
.sobre-azul .tiempo:hover{background:var(--azul-alto)}
.tiempo__n{
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.1em;color:var(--teal);margin:0 0 14px;
}
.sobre-azul .tiempo__n{color:var(--oro)}
.tiempo h3{font-size:clamp(18px,1.9vw,23px);margin:0 0 10px}
.tiempo p{font-size:14.8px;line-height:1.66;color:var(--tinta-2);margin:0}
.sobre-azul .tiempo p{color:var(--sobre-azul-2)}

/* ==========================================================================
   Procedimientos
   ========================================================================== */
.procs{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(14px,1.8vw,24px)}
.proc{
  border:1px solid var(--linea);border-radius:3px;
  padding:clamp(22px,2.4vw,32px);
  background:var(--marfil);
  display:grid;align-content:start;gap:12px;
  transition:border-color .5s var(--ease),transform .5s var(--ease-suave),box-shadow .5s var(--ease);
}
.proc:hover{
  border-color:var(--teal);transform:translateY(-4px);
  box-shadow:0 12px 34px rgba(23,50,77,.1);
}
.proc__zona{
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cobalto);margin:0;
}
.proc h3{font-size:clamp(19px,2vw,25px);margin:0}
.proc p{font-size:14.8px;line-height:1.66;color:var(--tinta-2);margin:0}
.proc__precio{
  font-family:var(--display);font-weight:600;font-size:15px;
  color:var(--azul);margin:6px 0 0;padding-top:14px;
  border-top:1px solid var(--linea);
}
.proc__precio span{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);display:block;margin-bottom:3px}

/* ==========================================================================
   Antes y después — marcos reservados, sin pacientes
   ========================================================================== */
.casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(12px,1.6vw,20px)}
.caso{
  border:1px solid var(--linea-azul);border-radius:3px;
  aspect-ratio:4/5;
  display:grid;place-items:center;align-content:center;gap:8px;
  text-align:center;padding:20px;
  background:
    repeating-linear-gradient(135deg, rgba(245,241,232,.035) 0 8px, transparent 8px 16px),
    var(--azul-hondo);
}
.caso b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--oro);display:block}
.caso span{font-size:12.5px;color:var(--sobre-azul-3);display:block;line-height:1.5}
.nota-reserva{
  font-size:13px;line-height:1.62;color:var(--sobre-azul-3);
  border-left:1px solid var(--oro);padding-left:15px;
  margin:clamp(22px,2.6vw,34px) 0 0;max-width:58ch;
}

/* ==========================================================================
   Cifras del turismo médico
   ========================================================================== */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--linea-azul);border:1px solid var(--linea-azul)}
.cifra{background:var(--azul-hondo);padding:clamp(20px,2.4vw,32px)}
.cifra b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.02em;
  color:var(--oro-luz);font-variant-numeric:tabular-nums;
}
.cifra > span{display:block;font-size:12.8px;line-height:1.52;color:var(--sobre-azul-3);margin-top:12px}
/* el número vive dentro del <b>: no debe heredar la regla de la etiqueta */
.cifra b span{display:inline;font-size:inherit;color:inherit;margin:0}

/* ==========================================================================
   Internacional
   ========================================================================== */
.etapas{display:grid;gap:0;border-top:1px solid var(--linea)}
.etapa{
  display:grid;grid-template-columns:minmax(140px,.7fr) 1.3fr;
  gap:6px 30px;align-items:baseline;
  padding-block:20px;border-bottom:1px solid var(--linea);
  transition:padding-inline .45s var(--ease),background .45s var(--ease);
}
.etapa:hover{background:rgba(63,115,116,.06);padding-inline:12px}
.etapa h3{font-size:clamp(16px,1.6vw,19px);margin:0;color:var(--teal-hondo)}
.etapa p{margin:0;font-size:15px;color:var(--tinta-2);max-width:56ch}

/* ==========================================================================
   Preguntas
   ========================================================================== */
.preguntas{max-width:860px;border-top:1px solid var(--linea)}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{
  cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;
  font-size:clamp(16px,1.7vw,20px);
  padding:20px 44px 20px 0;position:relative;color:var(--azul);
  transition:color .35s var(--ease);
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary:hover{color:var(--teal)}
.preguntas summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:10px;height:10px;
  border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.preguntas details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.preguntas .resp{padding:0 0 22px;color:var(--tinta-2);max-width:62ch}
.preguntas .resp p{margin:0}

/* ==========================================================================
   Sede
   ========================================================================== */
.sede{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--linea-azul);border:1px solid var(--linea-azul)}
.sede > div{background:var(--grafito);padding:clamp(22px,2.6vw,34px)}
.sede h3{font-size:clamp(18px,1.9vw,23px);margin:0 0 10px;color:var(--sobre-azul)}
.sede p{font-size:14.8px;line-height:1.66;color:var(--sobre-azul-2);margin:0}

/* ==========================================================================
   Formulario
   ========================================================================== */
.agenda{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,72px);align-items:start}
.formulario{display:grid;gap:15px}
.campo{display:grid;gap:6px}
.campo label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.sobre-azul .campo label{color:var(--oro)}
.campo input,.campo select,.campo textarea{
  appearance:none;
  background:var(--marfil);
  border:1px solid var(--linea);
  color:var(--tinta);
  font-family:var(--sans);font-size:15px;
  padding:12px 14px;border-radius:2px;
  transition:border-color .35s var(--ease);
}
.sobre-azul .campo input,.sobre-azul .campo select,.sobre-azul .campo textarea{
  background:rgba(245,241,232,.06);border-color:var(--linea-azul);color:var(--sobre-azul);
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--teal)}
.campo textarea{resize:vertical;min-height:94px}
.campo--par{grid-template-columns:1fr 1fr;gap:14px}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0h11L5.5 7z' fill='%233F7374'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.privacidad{font-size:12.5px;line-height:1.6;color:var(--sobre-azul-3);margin:4px 0 0;max-width:52ch}

.datos-consultorio{display:grid;gap:0;border-top:1px solid var(--linea-azul);margin-top:26px}
.datos-consultorio div{
  display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:4px 22px;align-items:baseline;
  padding-block:14px;border-bottom:1px solid var(--linea-azul);
}
.datos-consultorio dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.datos-consultorio dd{margin:0;font-size:15.5px;color:var(--sobre-azul)}

/* ==========================================================================
   Familia de marcas
   ========================================================================== */
.familia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,1.8vw,24px)}
.hermana{
  border:1px solid var(--linea);border-radius:3px;
  padding:clamp(22px,2.4vw,32px);background:var(--marfil);
  transition:border-color .5s var(--ease),transform .5s var(--ease-suave);
}
.hermana:hover{border-color:var(--teal);transform:translateY(-3px)}
.hermana span{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalto);display:block;margin-bottom:10px}
.hermana h3{font-size:clamp(18px,1.9vw,23px);margin:0 0 9px}
.hermana p{font-size:14.5px;color:var(--tinta-2);margin:0 0 14px}

/* ==========================================================================
   Pie
   ========================================================================== */
.pie{background:var(--grafito);color:var(--sobre-azul);padding-block:clamp(44px,6vw,76px) 26px}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.pie h4{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin:0 0 15px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie ul a{font-size:14px;color:var(--sobre-azul-2);transition:color .3s var(--ease)}
.pie ul a:hover{color:var(--oro-luz)}
.pie__nota{font-size:13.5px;color:var(--sobre-azul-3);max-width:44ch;margin:0}
.pie__fin{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  margin-top:clamp(30px,4vw,54px);padding-top:20px;border-top:1px solid var(--linea-azul);
  font-size:12px;color:var(--sobre-azul-3);
}

/* ==========================================================================
   Revelado: mínimo, y siempre desde un estado visible
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .revelar{animation:surgir .9s var(--ease-suave) both}
  @supports (animation-timeline:view()){
    .revelar{animation-timeline:view();animation-range:entry 4% entry 70%}
  }
}
@keyframes surgir{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}

@media (max-width:980px){
  .agenda{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .menu{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .etapa,.datos-consultorio div{grid-template-columns:1fr;gap:3px}
  .campo--par{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr}
  .casos{grid-template-columns:1fr 1fr}
  .reticula::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .revelar{opacity:1!important;transform:none!important}
}

@media print{
  .barra,.portada__foto,.portada__velo,.filamento,.reticula::before{display:none!important}
  body{background:#fff;color:#000}
  .sobre-azul,.sobre-grafito,.sobre-teal,.portada{background:#fff!important;color:#000!important}
  .seccion{page-break-inside:avoid}
}

/* ==========================================================================
   CAPA BARROCA
   Ornamento en la forma, contención en el color: todo lo de abajo se dibuja
   con los tres colores de la rama y el filamento de oro. Nada de superficies
   doradas — el barroco aquí es geometría, simetría y encuadre.
   ========================================================================== */

/* --- meandro griego: la greca, en CSS puro y a cualquier tamaño --------- */
.greca{
  height:14px;
  background-image:
    /* trazos verticales del laberinto */
    linear-gradient(90deg, var(--oro) 0 1.5px, transparent 1.5px),
    /* trazo superior */
    linear-gradient(180deg, var(--oro) 0 1.5px, transparent 1.5px),
    /* retorno interior */
    linear-gradient(90deg, transparent 0 7px, var(--oro) 7px 8.5px, transparent 8.5px),
    /* trazo inferior */
    linear-gradient(0deg, var(--oro) 0 1.5px, transparent 1.5px);
  background-size:14px 14px, 14px 14px, 14px 7px, 14px 14px;
  background-repeat:repeat-x;
  background-position:0 0, 0 0, 0 3.5px, 0 0;
  opacity:.5;
}
.greca--sutil{opacity:.26}
.greca--inv{transform:scaleY(-1)}

/* --- divisor con diamante al centro: el remate barroco clásico --------- */
.divisor{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:clamp(26px,3.4vw,48px) auto;
  max-width:560px;
}
.divisor::before,.divisor::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--oro));
}
.divisor::after{background:linear-gradient(90deg,var(--oro),transparent)}
.divisor i{
  width:9px;height:9px;flex-shrink:0;
  border:1px solid var(--oro);
  transform:rotate(45deg);
  position:relative;
}
.divisor i::before{
  content:"";position:absolute;inset:2px;
  background:var(--oro);opacity:.5;
}
.sobre-marfil .divisor::before{background:linear-gradient(90deg,transparent,var(--teal))}
.sobre-marfil .divisor::after{background:linear-gradient(90deg,var(--teal),transparent)}
.sobre-marfil .divisor i{border-color:var(--teal)}
.sobre-marfil .divisor i::before{background:var(--teal)}

/* --- cartucho: el doble filete que enmarca lo importante --------------- */
.cartucho{
  position:relative;
  padding:clamp(26px,3.4vw,52px);
}
.cartucho::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--linea-azul);
}
.cartucho::after{
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:1px solid var(--linea-azul);
  opacity:.5;
}
.sobre-marfil .cartucho::before,.sobre-marfil-2 .cartucho::before{border-color:rgba(63,115,116,.32)}
.sobre-marfil .cartucho::after,.sobre-marfil-2 .cartucho::after{border-color:rgba(63,115,116,.18)}

/* --- escuadras de esquina: el floreo, sin recargar -------------------- */
.escuadras{position:relative}
.escuadras::before,.escuadras::after{
  content:"";position:absolute;width:20px;height:20px;pointer-events:none;
  border-color:var(--oro);border-style:solid;border-width:0;
}
.escuadras::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.escuadras::after{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}
.sobre-marfil .escuadras::before,.sobre-marfil .escuadras::after,
.sobre-marfil-2 .escuadras::before,.sobre-marfil-2 .escuadras::after{border-color:var(--teal)}

/* --- encabezado axial: el barroco es simétrico ------------------------ */
.eje{text-align:center;display:grid;justify-items:center}
.eje .titulo,.eje .entrada{max-width:34ch;margin-inline:auto}
.eje .eyebrow{justify-content:center}
.eje .eyebrow::before,.eje .eyebrow::after{
  content:"";width:clamp(16px,3vw,40px);height:1px;
  background:currentColor;opacity:.5;
}
.eyebrow{display:flex;align-items:center;gap:12px}

/* --- capitular: una sola por sección de prosa larga ------------------- */
.capitular::first-letter{
  float:left;
  font-family:var(--display);font-weight:600;
  font-size:3.55em;line-height:.82;
  padding:.06em .1em 0 0;
  color:var(--teal);
}
.sobre-azul .capitular::first-letter{color:var(--oro-luz)}

/* --- rosetón: ornamento de fondo, generado, no ilustrado -------------- */
.roseton{
  position:absolute;
  width:min(46vw,540px);aspect-ratio:1;
  right:-10%;top:50%;translate:0 -50%;
  z-index:0;pointer-events:none;
  opacity:.14;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--oro) 0deg 0.6deg, transparent 0.6deg 11.25deg),
    radial-gradient(closest-side, transparent 52%, var(--oro) 52.5%, transparent 54%),
    radial-gradient(closest-side, transparent 70%, var(--oro) 70.5%, transparent 72%);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 78%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 78%);
  animation:girar 190s linear infinite;
}
.roseton--izq{left:-12%;right:auto;animation-direction:reverse}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.roseton{animation:none}}

/* --- pilastras: filetes verticales que encuadran la sección ---------- */
.pilastras::before,.pilastras::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--linea-azul) 18%,var(--linea-azul) 82%,transparent);
  z-index:1;pointer-events:none;
}
.pilastras::before{left:max(calc((100% - var(--maxw)) / 2 + 20px), 20px)}
.pilastras::after{right:max(calc((100% - var(--maxw)) / 2 + 20px), 20px)}
@media (max-width:820px){.pilastras::before,.pilastras::after{display:none}}

/* --- el número romano de sección, tratado como inscripción ----------- */
.romano{
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,1.2vw,13px);letter-spacing:.3em;
  color:var(--oro);margin:0 0 6px;
}
.sobre-marfil .romano,.sobre-marfil-2 .romano{color:var(--teal)}

@media (max-width:620px){
  .roseton{display:none}
  .cartucho::after{inset:5px}
  .capitular::first-letter{font-size:3em}
}

/* ==========================================================================
   AJUSTES SOBRE ASTRA
   Astra fija el color de los títulos con .entry-content :where(h1…), que
   pesa (0,1,0) y le gana a la herencia: en un fondo Azul Guerra los títulos
   salían en Azul Guerra, invisibles. Todo lo de abajo lleva body.lb para
   ganarle con especificidad, igual que en gracecons.
   ========================================================================== */

/* --- contexto oscuro: títulos, texto y enlaces --------------------------- */
body.lb .sobre-azul,
body.lb .sobre-azul-hondo,
body.lb .sobre-grafito,
body.lb .sobre-teal,
body.lb .portada{color:var(--sobre-azul)}

body.lb .sobre-azul :is(h1,h2,h3,h4),
body.lb .sobre-azul-hondo :is(h1,h2,h3,h4),
body.lb .sobre-grafito :is(h1,h2,h3,h4),
body.lb .sobre-teal :is(h1,h2,h3,h4),
body.lb .portada :is(h1,h2,h3,h4){color:var(--sobre-azul)}

body.lb .sobre-azul .entrada,  body.lb .portada .entrada,
body.lb .sobre-azul-hondo .entrada,
body.lb .sobre-grafito .entrada{color:var(--sobre-azul-2)}
body.lb .sobre-azul .cuerpo,body.lb .sobre-grafito .cuerpo{color:var(--sobre-azul-2)}

/* el hero es contexto oscuro: hereda las reglas de .sobre-azul */
body.lb .portada .eyebrow{color:var(--oro)}
body.lb .portada h1 em{color:var(--oro-luz)}
body.lb .portada .btn{border-color:var(--oro);color:var(--oro-luz)}
body.lb .portada .btn:hover{background:var(--oro);color:var(--azul-hondo)}
body.lb .portada .btn--solido{background:var(--oro);border-color:var(--oro);color:var(--azul-hondo)}
body.lb .portada .btn--solido:hover{background:var(--oro-luz);border-color:var(--oro-luz)}

/* títulos claros de sección: color de marca explícito */
body.lb .sobre-marfil :is(h1,h2,h3,h4),
body.lb .sobre-marfil-2 :is(h1,h2,h3,h4){color:var(--azul)}
body.lb .sobre-marfil .titulo em,body.lb .sobre-marfil-2 .titulo em{color:var(--teal)}

/* enlaces con clase de botón: Astra les pone subrayado y su color */
body.lb .entry-content a.btn,
body.lb a.btn{text-decoration:none}
body.lb .entry-content a:not(.btn){text-decoration:none}

/* Astra añade margen inferior a los párrafos del contenido */
body.lb .entry-content .eyebrow,
body.lb .entry-content .romano{margin-bottom:0}
body.lb .entry-content .eje .eyebrow{margin-bottom:12px}
body.lb .entry-content .romano{margin-bottom:4px}

/* lienzo completo: sin el relleno que Astra pone al contenido */
body.lb .site-content > .ast-container,
body.lb.ast-page-builder-template .site-content > .ast-container{max-width:none;padding:0}
body.lb .entry-content > *{margin-block:0}
body.lb .entry-header{display:none}

/* --- encabezado de Astra en una sola fila -------------------------------- */
body.lb .site-header{
  border-bottom:1px solid var(--linea);
  background:color-mix(in srgb,var(--marfil) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
body.lb .ast-primary-header-bar,
body.lb .main-header-bar{background:transparent;border:0;min-height:0}
body.lb .site-primary-header-wrap{min-height:72px;align-items:center}
body.lb .site-title,
body.lb .site-title a{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.9vw,22px);letter-spacing:.01em;
  color:var(--azul);margin:0;
}

/* el menú: compacto y sin partirse */
body.lb .main-header-menu > .menu-item > .menu-link{
  padding-inline:clamp(8px,1vw,15px);
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--tinta-2);
  white-space:nowrap;
  line-height:72px;
}
body.lb .main-header-menu > .menu-item > .menu-link:hover,
body.lb .main-header-menu > .current-menu-item > .menu-link{color:var(--azul)}
body.lb .ast-builder-menu-1 .main-header-menu{flex-wrap:nowrap}

/* el selector y el botón */
body.lb .ast-header-html .ast-builder-html-element > p{margin:0}
.lb-acciones{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lb-acciones .btn{white-space:nowrap;padding:10px 18px;font-size:12px}

/* menú de Astra en móvil: con la paleta */
body.lb .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.lb .ast-mobile-header-wrap .ast-primary-header-bar{background:var(--marfil)}
body.lb .ast-mobile-popup-drawer .menu-link{color:var(--azul)}
body.lb .ast-mobile-menu-trigger-minimal{color:var(--azul)}

@media (max-width:1180px){
  body.lb .main-header-menu > .menu-item > .menu-link{font-size:12.5px;padding-inline:8px}
}
@media (max-width:921px){
  .lb-acciones .btn{padding:9px 13px;font-size:11px}
}
@media (max-width:420px){
  .lb-acciones .btn{display:none}   /* en pantallas mínimas queda sólo el ES/EN */
}
@supports not (color: color-mix(in srgb,red,blue)){
  body.lb .site-header{background:var(--marfil)}
}

/* Astra le pone relleno y margen a los <ul> del contenido */
body.lb .entry-content :is(.avales,.menu,.lista,.zonas){padding-left:0;margin-left:0}
body.lb .entry-content .avales li{margin:0}