/* ============================================================
   tema3.css  v7 - Estilo claro + filete porteño: composición orgánica café/dorado, azul sólo en detalles
   Solo cambia lo visual. Reemplaza a tema2.css.
   Paleta: marfil #FFFDF8 / bordo #551B20 / dorado #B38A3E / azul #22307A
   ============================================================ */
:root{
  --marfil:#FFFDF8; --crema:#F6EEDD;
  --bordo:#551B20;  --bordo-2:#6E2429;
  --dorado:#B38A3E; --dorado-l:#EBD596; --azul:#22307A; --cafe:#A9774A; --choc:#2E170E;
  --esq:clamp(130px,17vw,260px);   /* tamaño de las esquinas de sección */
}

/* ---------- Base ---------- */
html,body{ background:var(--marfil) !important; }
body{ color:#3B2A2A; }
section{ position:relative; isolation:isolate; }

.bg-mesh{
  background-color:var(--marfil) !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(246,238,221,.95) 0, transparent 55%),
    radial-gradient(at 100% 100%, rgba(239,228,205,.9) 0, transparent 55%) !important;
}
.hero-base{
  background:
    radial-gradient(900px 380px at 30% 0%, rgba(179,138,62,.10) 0, transparent 70%),
    linear-gradient(180deg,#FFFDF8 0%,#FBF5E8 55%,#FFFFFF 100%) !important;
}
.hero-veil{ background:linear-gradient(180deg,rgba(255,253,248,.55),rgba(255,253,248,.2)) !important; }
.hero-wrap .from-indigo-400{ display:none; }

/* ---------- Letras: bordo con sombra dorada tipo rótulo de filete ---------- */
h1,h2,h3,h4,.text-gray-900{ color:var(--bordo); }
.text-white h1,.text-white h2,.text-white h3{ color:#fff; }
h1,h2{ filter:drop-shadow(1.5px 1.5px 0 rgba(169,119,74,.55)); }
.title-grad{
  background:linear-gradient(90deg,#551B20,#7C3A2D,#B38A3E) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}

/* ---------- Botones: bordo con filo dorado ---------- */
.btn-primary,.btn-grad{
  background:linear-gradient(135deg,#6E2429 0%,#551B20 60%,#43151A 100%) !important;
  color:#FFF8EA !important; border:1px solid var(--dorado) !important;
  box-shadow:0 6px 18px rgba(85,27,32,.25), inset 0 0 0 2px rgba(235,213,150,.35) !important;
}
.btn-primary:hover,.btn-grad:hover{ filter:brightness(1.1); }
.btn-secondary{
  background:rgba(255,253,248,.9) !important; color:var(--bordo) !important;
  border:1.5px solid var(--dorado) !important;
  box-shadow:inset 0 0 0 2px rgba(255,253,248,.9), inset 0 0 0 3px rgba(179,138,62,.5) !important;
}
.bg-gradient-to-r.from-red-600{ border:1px solid var(--dorado); box-shadow:inset 0 0 0 2px rgba(235,213,150,.3); }

/* ---------- Navegación: doble filete ondulado ---------- */
nav.fixed{
  background:rgba(255,253,248,.95) !important;
  border-bottom:2px solid var(--dorado) !important;
  box-shadow:0 2px 14px rgba(85,27,32,.10) !important;
}
nav.fixed::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:4px; pointer-events:none;
  border-top:1px solid var(--cafe); border-bottom:1px solid var(--cafe); opacity:.7;
}
nav .hover\:text-red-600:hover{ color:var(--bordo-2); }

/* ---------- Marco de filete en cada sección (4 esquinas + cinta) ---------- */
section::before,section::after{
  content:""; position:absolute; left:0; right:0; z-index:-1; pointer-events:none;
  background-repeat:no-repeat;
}
/* arriba: una esquina grande y otra chica, alternando el lado en cada sección */
section::before{
  top:0; height:var(--esq);
  background-image:url("ornamentos/fil-cafe-tl.svg"),url("ornamentos/fil-cafe-tr.svg");
  background-position:left top, right top;
  background-size:var(--esq) var(--esq), calc(var(--esq)*.62) calc(var(--esq)*.62);
}
section:nth-of-type(even)::before{
  background-size:calc(var(--esq)*.62) calc(var(--esq)*.62), var(--esq) var(--esq);
}
/* abajo: un remate central y una esquina en diagonal opuesta */
section::after{
  --b:clamp(90px,9vw,140px);
  bottom:0; top:auto; height:var(--b);
  background-image:url("ornamentos/fil-cafe-br.svg"),url("ornamentos/remate.svg");
  background-position:right bottom, center calc(100% - 6px);
  background-size:var(--b) var(--b), 230px auto;
}
section:nth-of-type(even)::after{
  background-image:url("ornamentos/fil-cafe-bl.svg"),url("ornamentos/remate.svg");
  background-position:left bottom, center calc(100% - 6px);
}
/* Hero: ornamentos por encima del fondo pero por debajo del contenido */
.hero-wrap::before{
  z-index:1; --esq:clamp(96px,10.5vw,160px);
  background-image:url("ornamentos/fil-cafe-tl.svg"),url("ornamentos/fil-cafe-tr.svg");
  background-position:left 4px, right 4px;
  background-size:var(--esq) var(--esq),var(--esq) var(--esq);
  background-repeat:no-repeat;
}
.hero-wrap .hero-inner{ position:relative; z-index:2; }
.card-glass section::before,.card-glass section::after{ display:none; }

/* Volutas que abrazan el título */
section h2.text-center,section .text-center > h2{
  width:fit-content; max-width:100%; margin-left:auto; margin-right:auto;
  padding:0 clamp(70px,14vw,230px);
  background:url("ornamentos/flanco-izq.svg") left center / clamp(60px,13vw,220px) auto no-repeat,
             url("ornamentos/flanco-der.svg") right center / clamp(60px,13vw,220px) auto no-repeat;
}
/* ---------- Marcos para fotos (card-glass) ---------- */
.card-glass{
  position:relative; border-radius:22px !important;
  border:6px solid var(--bordo) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 20px 48px rgba(85,27,32,.20), 0 0 0 2px var(--marfil), 0 0 0 3px var(--dorado) !important;
}
.card-glass::before{                       /* filete interior dorado doble */
  content:""; position:absolute; inset:6px; z-index:2; pointer-events:none;
  border:2px solid var(--dorado); border-radius:14px;
  box-shadow:inset 0 0 0 3px rgba(255,253,248,.85), inset 0 0 0 4px rgba(179,138,62,.55);
}
.card-glass::after{                         /* 4 esquinas de filete sobre la foto */
  content:""; position:absolute; inset:2px; z-index:3; pointer-events:none;
  background:
    url("ornamentos/fil-claro-tl.svg") left top / 120px 120px no-repeat,
    url("ornamentos/fil-claro-tr.svg") right top / 120px 120px no-repeat,
    url("ornamentos/fil-claro-bl.svg") left bottom / 120px 120px no-repeat,
    url("ornamentos/fil-claro-br.svg") right bottom / 120px 120px no-repeat;
}

/* ---------- Marcos para tarjetas blancas ---------- */
:where(div[class~="bg-white"][class*="rounded-3xl"],div[class~="bg-white"][class*="rounded-2xl"]){
  position:relative; isolation:isolate;
}
div[class~="bg-white"][class*="rounded-3xl"],
div[class~="bg-white"][class*="rounded-2xl"]{
  border:1.5px solid var(--dorado) !important;
  box-shadow:0 14px 34px rgba(85,27,32,.12), 0 0 0 4px var(--marfil), 0 0 0 5px rgba(179,138,62,.55);
}
div[class~="bg-white"][class*="rounded-3xl"]::before,
div[class~="bg-white"][class*="rounded-2xl"]::before{
  content:""; position:absolute; inset:5px; z-index:-1; pointer-events:none; border-radius:inherit;
  border:1px solid rgba(179,138,62,.55);
}
div[class~="bg-white"][class*="rounded-3xl"]::after,
div[class~="bg-white"][class*="rounded-2xl"]::after{
  content:""; position:absolute; inset:-9px; z-index:-1; pointer-events:none;
  background:
    url("ornamentos/fil-cafe-tl.svg") left top / 96px 96px no-repeat,
    url("ornamentos/fil-cafe-br.svg") right bottom / 96px 96px no-repeat;
}

/* ---------- Footer: crema + bordo + cinta de bandera ---------- */
footer.bg-gray-900,footer{
  background:var(--crema) !important; color:var(--bordo) !important;
  border-top:2px solid var(--dorado);
  padding-top:7.5rem !important;
}
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:130px; pointer-events:none;
  background:url("ornamentos/fil-cafe-tl.svg") left top / 130px 130px no-repeat, url("ornamentos/fil-cafe-tr.svg") right top / 130px 130px no-repeat;
}

footer .text-white,footer h2,footer h3{ color:var(--bordo) !important; }
footer [class*="text-gray-"]{ color:#6B3A3A !important; }
footer .text-red-500{ color:#8E3A3F !important; }
footer .bg-white\/5{ background:rgba(85,27,32,.07) !important; }
footer .border-white\/10,footer .border-white\/5{ border-color:rgba(179,138,62,.55) !important; }
footer a:hover{ color:var(--bordo-2); }
footer img.brightness-110{ filter:none; }

/* ---------- Detalles ---------- */
::selection{ background:#E8D4A0; color:var(--bordo); }
@media (max-width:640px){
  section h2.text-center,section .text-center > h2{ padding:0 8px; background:none; }
  :root{ --esq:96px; }
  .card-glass::after{ background-size:60px 60px; } footer::before{ background-size:110px 110px,110px 110px; }
}
@media print{ section::before,nav.fixed::after,footer::before{ display:none; } }

/* los cartelitos flotantes (botón de WhatsApp, etc.) no llevan marco ni esquinas */
div[class~="absolute"][class~="bg-white"]::after{ display:none; }

/* Foto principal: encuadre para que se vean los rostros (foto vertical) */
.card-glass img{ object-position:50% 14% !important; }

/* Botón flotante de WhatsApp: sin marco ni esquinas */
.fixed div[class~="bg-white"],
[class*="whats"] div[class~="bg-white"],[id*="whats"] div[class~="bg-white"],
[class*="wapp"] div[class~="bg-white"],[id*="wapp"] div[class~="bg-white"],
a[href*="wa.me"] div[class~="bg-white"],
div[class~="bg-white"][class*="rounded-full"]{
  border:0 !important; box-shadow:0 6px 18px rgba(0,0,0,.14) !important;
}
.fixed div[class~="bg-white"]::before,.fixed div[class~="bg-white"]::after,
[class*="whats"] div[class~="bg-white"]::before,[class*="whats"] div[class~="bg-white"]::after,
[id*="whats"] div[class~="bg-white"]::before,[id*="whats"] div[class~="bg-white"]::after,
[class*="wapp"] div[class~="bg-white"]::before,[class*="wapp"] div[class~="bg-white"]::after,
[id*="wapp"] div[class~="bg-white"]::before,[id*="wapp"] div[class~="bg-white"]::after,
a[href*="wa.me"] div[class~="bg-white"]::before,a[href*="wa.me"] div[class~="bg-white"]::after,
div[class~="bg-white"][class*="rounded-full"]::before,div[class~="bg-white"][class*="rounded-full"]::after{ content:none !important; display:none !important; }

/* Etiquetas internas (Sede / Enseña, etc.): sin filetes, para no tapar la información */
div[class*="rounded-3xl"] div[class~="bg-white"][class*="rounded-"],
div[class*="rounded-2xl"] div[class~="bg-white"][class*="rounded-"],
div[class~="bg-white"] div[class~="bg-white"][class*="rounded-"],
div[class~="card"] div[class~="bg-white"][class*="rounded-"],
article div[class~="bg-white"][class*="rounded-"]{
  border:1px solid rgba(179,138,62,.35) !important;
  box-shadow:none !important;
}
div[class*="rounded-3xl"] div[class~="bg-white"][class*="rounded-"]::before,
div[class*="rounded-3xl"] div[class~="bg-white"][class*="rounded-"]::after,
div[class*="rounded-2xl"] div[class~="bg-white"][class*="rounded-"]::before,
div[class*="rounded-2xl"] div[class~="bg-white"][class*="rounded-"]::after,
div[class~="bg-white"] div[class~="bg-white"][class*="rounded-"]::before,
div[class~="bg-white"] div[class~="bg-white"][class*="rounded-"]::after,
div[class~="card"] div[class~="bg-white"][class*="rounded-"]::before,
div[class~="card"] div[class~="bg-white"][class*="rounded-"]::after,
article div[class~="bg-white"][class*="rounded-"]::before,
article div[class~="bg-white"][class*="rounded-"]::after{
  content:none !important; display:none !important;
}

/* Cartelitos "Sede" / "Enseña" de profesores recibidos (y cualquier etiqueta en línea) */
div[class~="inline-flex"][class~="bg-white"],
div[class~="group"] div[class~="bg-white"][class*="rounded-2xl"]{
  border:1px solid rgba(179,138,62,.35) !important;
  box-shadow:none !important;
  position:static; isolation:auto;
}
div[class~="inline-flex"][class~="bg-white"]::before,
div[class~="inline-flex"][class~="bg-white"]::after,
div[class~="group"] div[class~="bg-white"][class*="rounded-2xl"]::before,
div[class~="group"] div[class~="bg-white"][class*="rounded-2xl"]::after{
  content:none !important; display:none !important;
}