/* =============== Variables (tema oliva/dorado) =============== */
:root{
  --bg-image: url('media/fondo.jpg');
  --overlay: rgba(22,17,5,.32);
  --card-bg: rgba(255,251,240,.94);
  --text: #1f2937;
  --accent: #b9922f;
  --accent-2:#d7c07a;

  --logo-size: 64px;
  --logo-lift: -62%;
  --logo-weight: 400;

  --font-brand: "Cinzel", Georgia, serif;
  --font-serif: "EB Garamond", Georgia, serif;

  /* Anchos fluidos (mobile-first) */
  --w-mob: 92vw;
  --w-tab: 84vw;
  --w-desk: 62vw;
  
  --role-scale: 1;   /* Composer */
  --sub-scale: 1;    /* NEW WEBSITE COMING SOON */
}

/* =================== Base =================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  color:var(--text);
  line-height:1.5;
  display:grid;
  place-items:center;
  background:#000;
  -webkit-text-size-adjust:100%;
}

/* Fondo + overlay */
.bg{
  position:fixed; inset:0; z-index:-2;
  background-image: var(--bg-image);
  background-size: cover; background-position: center;
}
.bg::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--overlay) }

/* =================== Header / Brand plaque =================== */
.brand-plaque{
  display:flex;
  flex-direction:column;   /* apila placa + aviso */
  align-items:center;      /* centra horizontalmente */
  gap:8px;
  margin: clamp(16px, 4vw, 28px) 0 0;
  padding: 0 16px;
}

.plaque{
  position:relative;
  display:flex;
  flex-direction: column;     /* ⬅ apila texto + subtítulo */
  align-items:center;
  justify-content:center;
  width: var(--w-mob);
  padding: clamp(14px,2.2vw,18px) clamp(22px,3.6vw,32px);
  border: 2px solid rgba(215,192,122,.72);
  border-radius: 28px;
  background: rgba(255,251,240,.06);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  margin-inline:auto;
  gap: 8px;                   /* espacio entre nombre/rol y el subtítulo */
}

/* Medallón EC centrado */
.plaque-logo{
  position:absolute; left:50%; top:0;
  transform: translate(-50%, var(--logo-lift));
  width: clamp(50px,8vw,var(--logo-size));
  height: clamp(50px,8vw,var(--logo-size));
  display:grid; place-items:center;
  border-radius:50%;
  font-family: var(--font-brand);
  font-weight: var(--logo-weight);
  font-variation-settings: "wght" var(--logo-weight);
  letter-spacing:.08em;
  color:#fff;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Texto de la placa */
.plaque-text{
  display:flex;
  flex-direction:column;
  justify-content:space-between;  /* nombre arriba / rol abajo */
  align-items:center;
  text-align:center;
  line-height:1.1;
  min-height: clamp(78px, 14vw, 120px);
  padding-block: 2px;
}
.plaque-name{
  margin:0;
  font-family: var(--font-brand);
  font-weight:700;
  font-size: clamp(26px,5.6vw,42px);
  letter-spacing:.5px;
  color:#f1ead7;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.plaque-role{
  margin:0;
  font-family: var(--font-serif);
  font-weight:600;
  font-style: italic;
  font-size: clamp(calc(15px * var(--role-scale)),
                   calc(3vw * var(--role-scale)),
                   calc(21px * var(--role-scale)));
  letter-spacing:.08em;
  color:#e9dbb1;
  opacity:.95;
}
.plaque-sub{
  text-align:center;
  font-family: var(--font-serif);
  font-size: clamp(calc(13px * var(--sub-scale)),
                   calc(1.6vw * var(--sub-scale)),
                   calc(16px * var(--sub-scale)));
  letter-spacing:.12em;
  text-transform: uppercase;
  color:#e1d3a1;
  opacity:.95;
  margin:0;
}

/* Aviso bajo la placa */
.coming-soon{ display:none !important; }
.coming-soon{
  width: var(--w-mob);
  text-align:center;
  margin:0;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing:.12em;
  color:#e1d3a1;
  text-transform:uppercase;
  opacity:.9;
}

/* =================== Layout principal =================== */
.wrap{
  width:100%;
  display:grid; gap:16px;
  padding:16px;
  margin-top: clamp(6px, 1.2vw, 12px);
}

/* Card mismo ancho que la placa/aviso */
.card{
  width: var(--w-mob);
  margin-inline:auto;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(215,192,122,.45);
  overflow:hidden;
}

/* Cabecera del card */
.card-header{ padding:18px 18px 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.badge{
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:600; letter-spacing:.3px; font-size:12px;
  padding:6px 10px; border-radius:999px; box-shadow: 0 6px 16px rgba(37,99,235,.35);
}

/* Títulos del card */
.title{ margin:2px 0 10px; padding:0 18px; color:#0b1220 }
.title h1{ font-family: var(--font-serif); font-weight:600; font-size: clamp(24px,5.6vw,30px); margin:0 }
.title p{  font-family: var(--font-serif); margin:6px 0 0; color:#3a3f47; font-size:15px }

/* =================== Formulario =================== */
form{ padding:0 18px 18px }
.grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:640px){ .grid-2{ grid-template-columns:1fr 1fr } }

label{ font-size:13px; color:#334155; display:block; margin:0 0 6px 6px; font-family: var(--font-serif) }
.input,.textarea{
  width:100%; border:1px solid #e2e8f0; border-radius:12px;
  padding:14px; font:inherit; background:#fff; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
  font-size:16px; /* evita zoom iOS */
}
.input:focus,.textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(185,146,47,.18) }
.textarea{ min-height:140px; resize:vertical }
.input::placeholder,.textarea::placeholder{ color:#6b7280; font-family: var(--font-serif) }

.actions{ display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:10px; flex-wrap:wrap }
.btn{
  appearance:none; border:0; border-radius:12px; padding:14px 18px;
  cursor:pointer; font-weight:700; font-size:15px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow: 0 10px 18px rgba(37,99,235,.20);
  transition: transform .08s ease, opacity .2s ease; touch-action: manipulation;
}
.btn:hover{ opacity:.95 }
.btn:active{ transform: translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.note{ font-size:12px; color:#475569; margin-left:8px; font-family: var(--font-serif) }

/* =================== Avisos =================== */
.alert{ display:none; border-radius:12px; padding:12px 14px; font-size:14px; margin:0 18px 16px }
.alert.show{ display:block }
.alert.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0 }
.alert.err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca }

/* =================== Anti-spam =================== */
.hp{ position:absolute; left:-9999px; visibility:hidden }

/* =================== Footer mini =================== */
.mini{ text-align:center; font-size:12px; color:#94a3b8; padding:6px 0 16px }
.mini a{ color:#cbd5e1 }

/* =================== Accesibilidad =================== */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* =================== Responsive refinements =================== */
@media (max-width:480px){
  .plaque-logo{ transform: translate(-50%, -62%); }
  .wrap{ margin-top: 6px; }
}

/* Escalas por viewport (misma lógica para placa/aviso/card) */
@media (min-width:640px){
  .plaque, .coming-soon, .card{ width: var(--w-tab); }
}
@media (min-width:1024px){
  .plaque, .coming-soon, .card{ width: var(--w-desk); }
  .wrap{ margin-top: 6px; } /* acerca card a la placa en desktop */
}
@media (min-width:1280px){
  .plaque{ padding: 10px 28px; }
  .plaque-logo{ transform: translate(-50%, -68%); }
}

/* Cambio de tamaño en pc y movil */
:root{
  --role-scale: 1.90;
  --sub-scale: 1.40;
}

/* Cambio de tamaño Desktop*/
@media (min-width:1024px){
  :root{
    --role-scale: 1.90;
    --sub-scale: 1.90;
  }
}
/* Femenino ordinal “ª” como superíndice fino */
.ordf{
  font-size: 0.58em;        /* tamaño relativo al nombre */
  line-height: 0;           /* evita que empuje la línea */
  position: relative;
  top: -0.35em;             /* súbela; ajusta si la quieres más/menos arriba */
  margin-left: 0.02em;      /* microespaciado después de la M */
  font-family: var(--font-serif); /* mejor glifo si Cinzel no lo dibuja bonito */
  font-weight: 600;         /* consistente con el resto */
  letter-spacing: 0;        /* sin tracking extra */
}
/* (alternativa simple)
.ordf{ font-size:.6em; vertical-align: super; line-height:0; }
*/