@font-face { font-family: "Brittany Signature"; src: url("../fonts/BrittanySignature.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
/* ==========================================================
   NOEMI NOVIAS — estilos
   Para cambiar colores o tipografías, edita solo este bloque.
   ========================================================== */
:root {
  --fondo: #fbfaf8;        /* blanco cálido */
  --fondo-2: #f3efe9;      /* arena muy suave */
  --tinta: #1c1b1a;        /* casi negro */
  --gris: #6f6a63;         /* texto secundario */
  --linea: #e4dfd7;        /* líneas finas */
  --acento: #a38f77;       /* champán */
  --oscuro: #121211;       /* secciones oscuras */
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --firma: "Brittany Signature", "Jost", cursive; /* caligráfica oficial: solo para resaltar palabras */
  --margen: clamp(20px, 5vw, 72px);
  --ancho: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 300; margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; z-index: 100; }
.saltar:focus { left: 8px; }

/* ---------- Piezas comunes ---------- */
.sobretitulo {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 18px; font-weight: 400;
}
.firma { font-family: var(--firma); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; }
.seccion { padding: clamp(72px, 11vw, 150px) var(--margen); }
.encabezado { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.encabezado h2, .nosotras h2, .cita h2 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: .01em; }
.bajada { color: var(--gris); margin: 22px auto 0; max-width: 580px; }
.centro { text-align: center; margin-top: clamp(36px, 5vw, 60px); }

.btn {
  display: inline-block; padding: 16px 30px; min-height: 52px;
  font: 400 12.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 0; cursor: pointer; text-align: center;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-claro { background: #fff; color: var(--tinta); }
.btn-claro:hover { background: var(--tinta); color: #fff; }
.btn-linea { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-linea:hover { background: #fff; color: var(--tinta); }
.btn-oscuro { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-oscuro:hover { background: transparent; color: var(--tinta); }
.btn-ancho { width: 100%; }

.enlace {
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.enlace:hover { color: var(--acento); }

/* Aparición suave al hacer scroll (solo si hay JavaScript) */
.js .aparecer { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .aparecer.visible { opacity: 1; transform: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margen);
  transition: background .3s, box-shadow .3s;
}
.marca { display: block; position: relative; width: 168px; height: 19px; flex: none; }
.marca .logo { position: absolute; inset: 0; width: 100%; height: auto; transition: opacity .3s; }
.logo-oscuro { opacity: 0; }
.cabecera.solida { background: rgba(251,250,248,.97); box-shadow: 0 1px 0 var(--linea); }
.cabecera.solida .logo-claro, .cabecera.abierta .logo-claro { opacity: 0; }
.cabecera.solida .logo-oscuro, .cabecera.abierta .logo-oscuro { opacity: 1; }

.menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.menu a {
  color: #fff; text-decoration: none; font-size: 12px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: color .3s, opacity .2s;
}
.menu a:hover { opacity: .65; }
.cabecera.solida .menu a { color: var(--tinta); }
.menu .menu-cita { border: 1px solid currentColor; padding: 10px 18px; }

.menu-btn { display: none; background: none; border: 0; width: 48px; height: 48px; margin-right: -12px; cursor: pointer; position: relative; z-index: 2; }
.menu-btn span { display: block; width: 24px; height: 1px; background: #fff; margin: 7px auto; transition: transform .3s, background .3s; }
.cabecera.solida .menu-btn span, .cabecera.abierta .menu-btn span { background: var(--tinta); }
.cabecera.abierta .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.cabecera.abierta .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu a[aria-current="page"] { color: var(--acento) !important; }
@media (min-width: 0px) {
  .menu-btn { display: block; }
  .menu { overflow-y: auto; padding: 80px 0 40px; }
  @media (max-height: 760px) { .menu { gap: 14px !important; justify-content: flex-start !important; } }
  .marca { z-index: 2; }
  .menu {
    position: fixed; inset: 0; background: var(--fondo);
    flex-direction: column; justify-content: center; gap: 20px;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .cabecera.abierta .menu { opacity: 1; visibility: visible; }
  .menu a, .cabecera.solida .menu a { color: var(--tinta); font-size: 14px; letter-spacing: .24em; padding: 6px; }
  .menu .menu-cita { padding: 14px 26px; margin-top: 10px; }
}

/* ---------- Inicio ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; color: #fff; overflow: hidden; background: var(--oscuro); }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero img { object-position: center 30%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.62) 68%, rgba(0,0,0,.82) 100%);
}
.hero-texto { position: absolute; z-index: 1; left: var(--margen); right: var(--margen); bottom: clamp(36px, 7vh, 96px); max-width: 720px; }
.hero .sobretitulo { color: rgba(255,255,255,.85); }
.hero h1 { font-size: clamp(36px, 6.6vw, 78px); letter-spacing: .005em; }
.hero-bajada { margin: 20px 0 30px; max-width: 460px; font-size: clamp(16px, 1.5vw, 19px); color: rgba(255,255,255,.9); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Presentación ---------- */
.presentacion { padding: clamp(72px, 10vw, 140px) var(--margen); max-width: var(--ancho); margin: 0 auto; }
.frase { font-size: clamp(22px, 3.1vw, 38px); line-height: 1.4; max-width: 980px; margin: 0 0 clamp(44px, 6vw, 80px); text-wrap: pretty; }
.datos { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.datos li { padding: 22px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; }
.datos strong { font-weight: 400; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; }
.datos span { color: var(--gris); }
@media (min-width: 760px) {
  .datos { grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 0; }
  .datos li { border-top: 1px solid var(--linea); border-bottom: 0; padding: 24px 0 0; }
}

/* ---------- Fotos ---------- */
.foto { display: block; overflow: hidden; background: var(--fondo-2); cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.foto:hover img { transform: scale(1.035); }

/* ---------- Colección Eden ---------- */
.eden { background: var(--fondo-2); }
.titulo-firma .firma { font-size: clamp(104px, 17vw, 210px); display: block; margin: -.06em 0 -.1em; }
.lema { font-size: clamp(13px, 1.3vw, 15px); letter-spacing: .3em; text-transform: uppercase; margin: 18px 0 0; }
.eden-texto { max-width: 980px; margin: 0 auto clamp(40px, 6vw, 72px); color: var(--gris); display: grid; gap: 8px 48px; }
.eden-texto strong { color: var(--tinta); font-weight: 400; }
.eden .encabezado { margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 820px) { .eden-texto { grid-template-columns: 1fr 1fr; } }
.mosaico { max-width: var(--ancho); margin: 0 auto; columns: 2; column-gap: clamp(8px, 1.4vw, 20px); }
.mosaico .foto { margin-bottom: clamp(8px, 1.4vw, 20px); break-inside: avoid; }
@media (min-width: 860px) { .mosaico { columns: 3; } }

/* ---------- Tiras horizontales (desfile y producciones) ---------- */
.tira-marco { position: relative; }
.tira {
  display: flex; gap: clamp(8px, 1.2vw, 16px);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 calc(var(--margen) * -1); padding: 0 var(--margen); scroll-padding: 0 var(--margen);
}
.tira::-webkit-scrollbar { display: none; }
.tira .foto { flex: none; height: clamp(340px, 62vh, 600px); scroll-snap-align: start; }
.tira .foto img { width: auto; height: 100%; max-width: none; }
.tira-nav { display: none; justify-content: center; gap: 12px; margin-top: 28px; }
.tira-nav button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit;
  font: 300 20px var(--sans); cursor: pointer; transition: background .25s, color .25s;
}
@media (hover: hover) and (min-width: 760px) { .tira-nav { display: flex; } }

/* ---------- Bridal Fashion Show ---------- */
.desfile { background: var(--oscuro); color: #f4f1ec; overflow: hidden; }
.desfile .sobretitulo, .desfile .bajada { color: #b3ada4; }
.desfile h2 { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(27px, 4.6vw, 54px); }
.desfile .foto { background: #1d1c1a; }
.desfile .tira-nav button:hover { background: #f4f1ec; color: var(--oscuro); }

/* ---------- Producciones ---------- */
.producciones { overflow: hidden; }
.produccion { max-width: var(--ancho); margin: 0 auto clamp(64px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.prod-info .num, .pasos .num { font-size: 12px; letter-spacing: .24em; color: var(--acento); font-weight: 400; display: block; margin-bottom: 12px; }
.prod-info h3 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; }
.prod-info p { color: var(--gris); max-width: 440px; margin-bottom: .6em; }
.creditos { font-size: 13.5px; line-height: 1.7; }
@media (min-width: 900px) {
  .produccion { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: end; }
  .produccion .tira { margin-left: 0; padding-left: 0; scroll-padding-left: 0; }
  .produccion .tira .foto { height: clamp(380px, 56vh, 520px); }
}

.trayectoria { max-width: var(--ancho); margin: 0 auto; padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--tinta); }
.trayectoria > h3 { font-size: 13px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 20px; }
.eventos li { display: grid; gap: 2px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.ev-nombre { font-size: clamp(21px, 2.6vw, 32px); line-height: 1.2; }
.ev-detalle { color: var(--gris); font-size: 15px; }
@media (min-width: 760px) {
  .eventos li { grid-template-columns: 1fr 1fr; align-items: baseline; gap: 32px; padding: 24px 0; }
  .ev-detalle { text-align: right; }
}
.locaciones { margin: 36px 0 0; color: var(--gris); font-size: 15px; max-width: 780px; }
.locaciones span { display: block; color: var(--tinta); font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }

/* ---------- Cómo trabajamos ---------- */
.proceso { background: var(--fondo-2); }
.pasos { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 0; }
.pasos li { padding: 26px 0; border-top: 1px solid var(--linea); }
.pasos h3 { font-size: 22px; margin-bottom: 10px; }
.pasos p { color: var(--gris); margin: 0; font-size: 16px; }
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
@media (min-width: 1100px) {
  .pasos { grid-template-columns: repeat(5, 1fr); column-gap: 32px; }
  .pasos li { border-top-color: var(--tinta); }
}
.ledije { max-width: 640px; margin: clamp(56px, 8vw, 100px) auto 0; text-align: center; }
.ledije .firma { font-size: clamp(46px, 7vw, 78px); margin-bottom: 18px; }
.ledije p:last-child { color: var(--gris); margin: 0; }

/* ---------- Nosotras ---------- */
.nosotras { max-width: calc(var(--ancho) + var(--margen) * 2); margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.nosotras-foto { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(8px, 1.4vw, 20px); align-items: end; }
.nosotras-foto .foto { aspect-ratio: 2 / 3; }
.nosotras-texto p { color: var(--gris); max-width: 500px; margin-top: 22px; }
.equipo { margin-top: 32px; border-top: 1px solid var(--linea); max-width: 500px; }
.equipo li { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.equipo strong { font-weight: 400; font-size: 20px; }
.equipo span { color: var(--gris); font-size: 15px; text-align: right; }
@media (min-width: 900px) { .nosotras { grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 7vw, 110px); } }

/* ---------- Cita ---------- */
.cita { background: var(--oscuro); color: #f4f1ec; display: grid; gap: 48px; }
.cita > * { width: 100%; max-width: 560px; margin: 0 auto; }
.cita .sobretitulo { color: #b3ada4; }
.cita h2 .firma { font-size: 1.7em; display: inline-block; margin: -.1em 0 -.1em .06em; vertical-align: -.06em; }
.cita-intro > p { color: #c9c3b9; margin-top: 22px; }
.recomendaciones { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
.recomendaciones h3 { font-size: 12px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 16px; }
.recomendaciones li { color: #c9c3b9; padding: 7px 0 7px 22px; position: relative; font-size: 16px; }
.recomendaciones li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 10px; height: 1px; background: var(--acento); }

.formulario { background: var(--fondo); color: var(--tinta); padding: clamp(24px, 4vw, 44px); display: grid; gap: 22px; align-self: start; }
.formulario label, .formulario legend { font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; display: block; }
.formulario small { letter-spacing: .04em; text-transform: none; color: var(--gris); font-size: 13px; }
.formulario input[type=text], .formulario input[type=date], .formulario select, .formulario textarea {
  display: block; width: 100%; margin-top: 8px; padding: 12px 0; min-height: 48px;
  border: 0; border-bottom: 1px solid #bdb6ab; border-radius: 0; background: transparent;
  font: 300 17px var(--sans); color: var(--tinta); letter-spacing: 0; text-transform: none;
}
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 0; border-bottom-color: var(--tinta); box-shadow: 0 1px 0 var(--tinta); }
.formulario ::placeholder { color: #a8a299; }
.formulario fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formulario legend { margin-bottom: 12px; padding: 0; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span { display: block; padding: 12px 18px; border: 1px solid #bdb6ab; font-size: 14px; letter-spacing: .06em; text-transform: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.opcion input:checked + span { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.form-error { color: #a03325; margin: 0; font-size: 15px; }
.form-nota { margin: 0; text-align: center; color: var(--gris); font-size: 15px; }
@media (min-width: 980px) {
  .cita { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); padding-left: max(var(--margen), calc((100vw - var(--ancho)) / 2)); padding-right: max(var(--margen), calc((100vw - var(--ancho)) / 2)); }
  .cita > * { max-width: none; }
}

/* ---------- Ubicación ---------- */
.sedes { max-width: 980px; margin: 0 auto; display: grid; gap: 20px; }
.sede { border: 1px solid var(--linea); padding: clamp(26px, 4vw, 44px); }
.sede h3 { font-size: 27px; }
.sede-rol { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--acento); margin: 8px 0 20px; font-weight: 400; }
.sede p { color: var(--gris); }
.sede .horario { color: var(--tinta); margin-bottom: 24px; }
@media (min-width: 760px) { .sedes { grid-template-columns: 1fr 1fr; } }

/* ---------- Trayectoria ---------- */
.trayectoria-sec { overflow: hidden; border-bottom: 1px solid var(--linea); }
.cronologia { max-width: var(--ancho); margin: 0 auto clamp(64px, 9vw, 120px); border-top: 1px solid var(--tinta); }
.cronologia li { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.cronologia .anio { font-size: 13px; letter-spacing: .24em; color: var(--acento); font-weight: 400; }
.cronologia h3 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 6px; }
.cronologia p { color: var(--gris); margin: 0; font-size: 16px; }
@media (min-width: 760px) {
  .cronologia li { grid-template-columns: 200px 1fr; gap: 32px; align-items: baseline; padding: 26px 0; }
  .cronologia li > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: baseline; }
  .cronologia h3 { margin: 0; }
}
.prod-info .num { text-transform: uppercase; }

/* ---------- Cómo trabajamos: etapas con foto ---------- */
.etapas { max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(44px, 7vw, 96px); }
.etapa { display: grid; gap: 22px; align-items: center; }
.etapa-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--linea); }
.etapa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.etapa-texto .num { font-size: clamp(40px, 5vw, 64px); letter-spacing: 0; line-height: 1; color: var(--acento); font-weight: 300; margin-bottom: 14px; }
.etapa-texto h3 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 16px; }
.etapa-texto p { color: var(--gris); }
.etapa-texto .etapa-nota { color: var(--tinta); border-left: 1px solid var(--acento); padding-left: 16px; margin: 20px 0 0; font-size: 16px; }
@media (min-width: 900px) {
  .etapa { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
  .etapa:nth-child(even) .etapa-foto { order: 2; }
  .etapa-foto { aspect-ratio: 5 / 4; }
}
.tiempos { max-width: 1120px; margin: clamp(56px, 8vw, 100px) auto 0; display: grid; gap: 1px; background: var(--tinta); border: 1px solid var(--tinta); }
.tiempos > div { background: var(--fondo-2); padding: clamp(26px, 4vw, 44px); }
.tiempos h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 12px; }
.tiempos p { color: var(--gris); margin: 0; }
.tiempos strong { color: var(--tinta); font-weight: 400; }
@media (min-width: 760px) { .tiempos { grid-template-columns: 1fr 1fr; } }
.cierre-proceso { max-width: 640px; margin: clamp(48px, 7vw, 80px) auto 0; text-align: center; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; }

/* ---------- Guía de estilos ---------- */
.guia-grupo { max-width: var(--ancho); margin: 0 auto clamp(48px, 7vw, 88px); }
.guia-grupo > h3 { font-size: 13px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; padding-bottom: 16px; margin-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--tinta); }
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(10px, 1.6vw, 24px); }
.ficha-foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--fondo-2); margin-bottom: 14px; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.ficha h4 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; margin: 0 0 6px; line-height: 1.2; }
.ficha p { color: var(--gris); font-size: 15px; line-height: 1.55; margin: 0; }
@media (min-width: 760px) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Sobre NOEMÍ NOVIAS ---------- */
.nosotras h2 { font-size: clamp(28px, 3.6vw, 44px); }
.nosotras-texto p { max-width: 560px; margin-top: 0; }
.nosotras-texto h2 { margin-bottom: 24px; }
.esencia { grid-column: 1 / -1; border-top: 1px solid var(--tinta); padding-top: clamp(32px, 5vw, 56px); display: grid; gap: 16px; }
.esencia h3 { font-size: 13px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; }
.esencia p { color: var(--gris); max-width: 760px; margin: 0; }
.esencia .esencia-cierre { color: var(--tinta); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; margin-top: 12px; }
@media (min-width: 900px) { .nosotras { align-items: start; } .esencia { grid-template-columns: 290px 1fr; gap: 16px 56px; } .esencia .esencia-cierre { grid-column: 2; } }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { background: var(--fondo-2); }
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--tinta); }
.faq details { border-bottom: 1px solid #d5cfc5; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: clamp(18px, 2vw, 22px); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 300; color: var(--acento); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--gris); margin: 0; padding: 0 44px 26px 0; max-width: 720px; }

/* Sede principal (Huancaro) */
.sede-principal { max-width: 1080px; margin: 0 auto; border: 1px solid var(--tinta); padding: clamp(28px, 5vw, 64px); display: grid; gap: 36px; }
.sede-principal h3 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 18px; }
.sede-principal .sede-rol { margin: 0 0 14px; }
.direccion { font-size: clamp(18px, 1.8vw, 21px); margin: 0; }
.direccion span { color: var(--gris); font-size: 16px; }
.sede-principal .horario { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; margin: 0 0 8px; }
.sede-principal .nota { color: var(--gris); margin-bottom: 26px; }
.btn-borde { border-color: var(--tinta); color: var(--tinta); }
.btn-borde:hover { background: var(--tinta); color: #fff; }
.sede-secundaria { max-width: 1080px; margin: 26px auto 0; color: var(--gris); font-size: 15.5px; text-align: center; }
@media (min-width: 820px) { .sede-principal { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; } }

/* Datos del Bridal Fashion Show */
.hechos { max-width: var(--ancho); margin: clamp(48px, 6vw, 80px) auto 0; display: grid; gap: 0; }
.hechos li { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 4px; }
.hechos strong { font-weight: 300; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.hechos span { color: #b3ada4; font-size: 15px; }
.desfile-cierre { max-width: 640px; margin: clamp(36px, 5vw, 60px) auto 0; text-align: center; color: #c9c3b9; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
@media (min-width: 760px) { .hechos { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } }

/* Fotos "Le dije sí" */
.proceso { overflow: hidden; }
.ledije-fotos { max-width: var(--ancho); margin: clamp(36px, 5vw, 56px) auto 0; }
.ledije-fotos .tira .foto { height: clamp(300px, 46vh, 420px); }

/* ---------- Pie ---------- */
.pie { background: var(--oscuro); color: #b3ada4; text-align: center; padding: 72px var(--margen) 110px; font-size: 15px; }
.pie .logo { width: 200px; margin: 0 auto 18px; }
.pie-enlaces { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; margin: 26px 0; }
.pie-enlaces a { color: #f4f1ec; text-decoration: none; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; padding: 8px 0; }
.pie-enlaces a:hover, .pie-familia a:hover { color: var(--acento); }
.pie-legal { margin: 20px 0 0; font-size: 13px; opacity: .7; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--tinta); color: #fff; text-decoration: none;
  padding: 13px 20px 13px 16px; border-radius: 40px; border: 1px solid rgba(255,255,255,.25);
  font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); transition: transform .25s, background .25s, opacity .3s, visibility .3s;
}
/* Con JavaScript, el botón aparece recién al pasar la portada (ahí ya hay un botón de cita) */
.js .wa-flotante:not(.visible) { opacity: 0; visibility: hidden; }
.wa-flotante:hover { transform: translateY(-2px); background: #1f8f4e; }

/* ---------- Visor de fotos ---------- */
.visor { position: fixed; inset: 0; z-index: 90; background: rgba(12,12,11,.96); display: flex; align-items: center; justify-content: center; }
.visor[hidden] { display: none; }
.visor img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.visor button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font: 300 26px var(--sans); width: 56px; height: 56px; }
.visor-cerrar { top: 10px; right: 10px; font-size: 36px !important; }
.visor-flecha.ant { left: 6px; top: 50%; transform: translateY(-50%); }
.visor-flecha.sig { right: 6px; top: 50%; transform: translateY(-50%); }
.visor-pie { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; color: #b3ada4; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }

/* ==========================================================
   REDISEÑO (pensado primero para celular)
   ========================================================== */

/* ---------- Portada: titular en dos tipografías + 6 accesos ---------- */
.hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero::after { background: linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.74) 66%, rgba(0,0,0,.9) 100%); }
.hero-texto { position: relative; left: auto; right: auto; bottom: auto; max-width: 640px; width: 100%; margin: 0 auto; padding: 120px var(--margen) clamp(20px, 4vh, 44px); text-align: center; }
/* En la portada el logo grande va sobre la foto; el pequeño de la barra aparece al bajar */
.pag-portada .cabecera:not(.solida):not(.abierta) .marca { opacity: 0; pointer-events: none; }
.marca { transition: opacity .3s; }
.hero { justify-content: space-between !important; }
.hero::after { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.3) 20%, rgba(0,0,0,0) 36%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.76) 70%, rgba(0,0,0,.92) 100%) !important; }
.hero-marca { position: relative; z-index: 1; padding: clamp(84px, 13vh, 130px) var(--margen) 0; }
.hero-texto { padding-top: 40px !important; }
.hero-logo { position: static !important; width: min(88%, 440px) !important; height: auto !important; margin: 0 auto; filter: drop-shadow(0 1px 16px rgba(0,0,0,.4)); }
.hero h1 {
  font-size: clamp(11.5px, 3.1vw, 14px); font-weight: 400; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; line-height: 1.7;
  margin: 18px auto clamp(22px, 4vh, 38px); padding-top: 18px; max-width: 30em; position: relative; color: rgba(255,255,255,.92);
}
.hero h1::before { content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 1px; margin-left: -18px; background: rgba(255,255,255,.6); }
.accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.28); }
.acceso {
  display: grid; gap: 3px; text-align: center; text-decoration: none; color: #fff; min-height: 68px; align-content: center;
  padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.28); transition: background .25s, color .25s;
}
.acceso:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.28); }
.acceso-nombre { font-size: 12.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; }
.acceso-sub { font-size: 12px; opacity: .7; line-height: 1.3; }
.acceso-novias { display: inline-block; margin-top: 18px; padding: 8px 4px; font-size: 12.5px; color: rgba(255,255,255,.8); text-decoration: none; }
.acceso-novias span { border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; color: #fff; }
.acceso:hover, .acceso:active { background: rgba(255,255,255,.14); }
.acceso-principal { grid-column: 1 / -1; background: #fff; color: var(--tinta); border: 0 !important; min-height: 58px; margin-bottom: 0; }
.acceso-principal .acceso-sub { display: none; }
.acceso-principal:hover { background: var(--tinta); color: #fff; }
/* con "Agendar cita" a todo el ancho, los otros cinco: el último también ocupa la fila completa */
.acceso:nth-child(even) { border-right: 1px solid rgba(255,255,255,.28); }
.acceso:nth-child(odd) { border-right: 0; }
.acceso:last-child { grid-column: 1 / -1; border-right: 0; }
@media (min-width: 900px) {
  .hero-texto { max-width: 900px; }
  .hero-logo { width: 480px !important; }
  .accesos { grid-template-columns: repeat(5, 1fr); }
  .acceso { min-height: 84px; border-right: 1px solid rgba(255,255,255,.28) !important; }
  .acceso:last-child { grid-column: auto; border-right: 0 !important; }
}

/* ---------- Cabecera de páginas interiores ---------- */
.pag-interior main { padding-top: 68px; }
.pag-cabeza { padding: clamp(28px, 6vw, 64px) var(--margen) clamp(22px, 4vw, 40px); max-width: 860px; margin: 0 auto; text-align: center; }
.pag-cabeza h1 { font-size: clamp(30px, 6.4vw, 54px); }
.pag-cabeza .bajada { margin-top: 16px; }
.volver { display: inline-block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--gris); padding: 10px 0; margin-bottom: 14px; }
.volver:hover { color: var(--tinta); }
.enlace-txt { color: var(--tinta); text-underline-offset: 3px; white-space: nowrap; }
.cta-final { text-align: center; padding: clamp(56px, 9vw, 110px) var(--margen); border-top: 1px solid var(--linea); }
.cta-final .firma { font-size: clamp(44px, 9vw, 76px); margin-bottom: 26px; }
.pag-interior .seccion { padding-top: clamp(48px, 8vw, 110px); }

/* ---------- Videos ---------- */
.video { margin: 0 auto; max-height: 78vh; max-width: 420px; background: #1d1c1a; overflow: hidden; }
.video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-centro { margin: 0 auto clamp(28px, 5vw, 48px); max-width: 420px; }

/* ---------- Vistas (índice ↔ detalle, pestañas) ---------- */
.js .detalle { display: none; }
.js .detalle.activo { display: block; animation: entrar .45s ease both; }
.js .vistas.viendo .indice { display: none; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.detalles { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.detalle { padding: clamp(20px, 4vw, 40px) 0 clamp(48px, 8vw, 96px); }
.detalle > h2 { font-size: clamp(32px, 7vw, 56px); margin-bottom: 16px; }
.resena { color: var(--gris); max-width: 640px; font-size: clamp(17px, 2vw, 19px); }

/* Vestidos: tarjetas */
.tarjetas { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(56px, 9vw, 110px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(10px, 1.6vw, 22px); }
.tarjeta { display: grid; text-decoration: none; }
.tarjeta-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fondo-2); margin-bottom: 12px; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-nombre { font-size: clamp(17px, 2vw, 22px); line-height: 1.2; }
.tarjeta-sub { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-top: 4px; }
@media (min-width: 760px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha-tecnica { margin: 26px 0 0; border-top: 1px solid var(--tinta); max-width: 640px; }
.ficha-tecnica div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.ficha-tecnica dt { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }
.ficha-tecnica dd { margin: 0; }
.detalle .mosaico, .detalle .video-centro { margin-top: clamp(28px, 5vw, 48px); }
.detalle .mosaico { max-width: none; }

/* Paneles de botones (Experiencia y Estilos) */
.panel { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-btn {
  display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; text-decoration: none;
  padding: 14px 8px 16px; border: 1px solid var(--linea); background: #fff; transition: border-color .25s, background .25s, color .25s;
}
.panel-btn svg { width: 100%; max-width: 92px; height: auto; display: block; }
.panel-ilus { width: 100%; max-width: 96px; aspect-ratio: 1; overflow: hidden; }
.panel-ilus svg { max-width: none; width: 100%; height: 100%; }
.panel-ilus.es-boceto { background: #f6f1e7; }
.panel-num { font-size: 10.5px; letter-spacing: .22em; color: var(--acento); }
.panel-nombre { font-size: 12.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.panel-btn:hover { border-color: var(--tinta); }
.panel-btn.activo { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.panel-btn.activo svg[data-icono] { filter: invert(1); }
.panel-7 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.panel-7 .panel-btn { padding: 8px 4px 10px; }
.panel-7 .panel-nombre { font-size: 10px; letter-spacing: .1em; }
@media (min-width: 760px) {
  .panel-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .panel-7 { grid-template-columns: repeat(7, 1fr); gap: 10px; }
  .panel-7 .panel-nombre { font-size: 12px; letter-spacing: .16em; }
  .panel-btn { padding: 22px 12px; }
}
.vistas[data-modo="pestanas"] .detalle { padding-top: clamp(36px, 6vw, 64px); }

/* Fases de la experiencia */
.fase-cuerpo { display: grid; gap: 28px; margin-bottom: clamp(28px, 5vw, 48px); }
.fase-texto h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 26px 0 10px; }
.fase-texto h3:first-child { margin-top: 8px; }
.fase-texto p { color: var(--gris); max-width: 620px; }
.fase-texto .etapa-nota { color: var(--tinta); border-left: 1px solid var(--acento); padding-left: 16px; }
.fase-texto .btn { margin-top: 10px; }
.fase-texto .cierre-proceso { color: var(--tinta); text-align: left; margin: 28px 0 0; }
.lista-cita { border-top: 1px solid var(--linea); margin: 22px 0; padding-top: 18px; max-width: 620px; }
.lista-cita h4 { font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 10px; }
.lista-cita li { color: var(--gris); padding: 5px 0 5px 20px; position: relative; }
.lista-cita li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1px; background: var(--acento); }
.fase .tiempos { margin: 22px 0 0; max-width: 620px; grid-template-columns: 1fr; }
.fase .tiempos > div { background: var(--fondo); padding: 22px; }
.fase .tiempos h4 { font-size: 21px; font-weight: 300; margin: 0 0 6px; }
.fase .tira { margin: 0 calc(var(--margen) * -1); }
@media (min-width: 900px) { .fase-cuerpo { grid-template-columns: 1fr 340px; gap: 64px; align-items: start; } }

/* Guía: fichas con boceto */
.detalle .fichas { margin-top: clamp(24px, 4vw, 40px); }
.ficha-foto.es-boceto { background: #f6f1e7; }
.ficha-foto.es-boceto svg { width: 100%; height: 100%; display: block; }
.ficha-tip { color: var(--tinta) !important; font-size: 14px !important; margin-top: 6px !important; padding-left: 10px; border-left: 1px solid var(--acento); }

/* ---------- Diseña tu vestido ---------- */
.disenador { max-width: 1100px; margin: 0 auto; padding: 0 0 clamp(48px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
.controles, #grupos { min-width: 0; }
.lienzo {
  position: sticky; top: 68px; z-index: 5; background: #f6f1e7; height: 44vh; min-height: 280px;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; place-items: center;
  background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.035) 0 1px, transparent 1px 3px);
}
.lienzo svg { position: absolute; inset: 8px 0 22px; width: 100%; height: calc(100% - 30px); display: block; }
.lienzo-firma { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #8a8275; }
.controles { padding: 22px var(--margen) 0; }
.grupo { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.grupo legend { font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; padding: 0; margin-bottom: 10px; }
.grupo legend small { letter-spacing: .04em; text-transform: none; color: var(--gris); font-size: 12.5px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margen) * -1); padding: 2px var(--margen); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 46px; padding: 0 18px; border: 1px solid #bdb6ab; background: transparent; color: var(--tinta);
  font: 300 15px var(--sans); cursor: pointer; border-radius: 0; transition: background .2s, color .2s, border-color .2s;
}
.chip.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.resumen { color: var(--gris); font-size: 15px; border-top: 1px solid var(--linea); padding-top: 18px; }
.acciones { display: grid; gap: 10px; margin-top: 18px; }
.enlace-btn { background: none; border: 0; padding: 12px; font: 400 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.nota-boceto { color: var(--gris); font-size: 14px; margin-top: 14px; }
@media (min-width: 900px) {
  .disenador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-left: var(--margen); padding-right: var(--margen); align-items: start; }
  .lienzo { height: calc(100vh - 110px); top: 88px; border: 1px solid var(--linea); }
  .controles { padding: 0; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

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

/* ==========================================================
   MI VESTIDO (espacio de novias)
   ========================================================== */
.portal-acceso { max-width: 460px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--margen) 72px; text-align: center; }
.portal-acceso h1 { font-size: clamp(34px, 8vw, 50px); }
.portal-acceso .formulario { margin-top: 30px; text-align: left; }
.portal-aun { margin-top: 26px; font-size: 14.5px; color: var(--gris); }
.portal-panel { max-width: 560px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) var(--margen) 72px; display: grid; gap: 14px; }
.pt-saludo { text-align: center; padding-bottom: 10px; }
.pt-saludo h1 { font-size: clamp(34px, 9vw, 52px); }
.pt-saludo .sobretitulo { margin-bottom: 12px; }
.pt-cuenta { margin: 14px 0 0; color: var(--gris); }
.pt-cuenta strong { color: var(--tinta); font-weight: 500; }
.pt-tarjeta { border: 1px solid var(--linea); background: #fff; padding: 22px 20px; }
.pt-tarjeta h2 { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; color: var(--gris); margin-bottom: 16px; }
.pt-destacada { background: var(--oscuro); border-color: var(--oscuro); color: #fff; }
.pt-destacada h2 { color: rgba(255,255,255,.65); }
.pt-grande { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.2; margin: 0 0 4px; }
.pt-hora { margin: 0 0 14px; font-size: 17px; color: rgba(255,255,255,.85); }
.pt-nota { font-size: 14px; color: var(--gris); margin: 0 0 14px; line-height: 1.5; }
.pt-destacada .pt-nota { color: rgba(255,255,255,.7); }
.pt-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pt-botones .btn { padding: 14px 8px; font-size: 11px; letter-spacing: .14em; }
.pt-botones .btn:only-child { grid-column: 1 / -1; }
.pt-enlace { display: inline-block; font-size: 14px; padding: 8px 0 2px; text-underline-offset: 4px; }
.pt-luego { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); font-size: 14.5px; }
.pt-luego span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.pt-saldo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.pt-saldo span { color: var(--gris); }
.pt-saldo strong { font-size: clamp(28px, 8vw, 36px); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-barra { height: 4px; background: var(--fondo-2); margin-bottom: 16px; }
.pt-barra i { display: block; height: 100%; background: var(--acento); }
.pt-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 14px; font-size: 15.5px; }
.pt-datos dt { color: var(--gris); }
.pt-datos dd { margin: 0; text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.pt-lista li { position: relative; padding: 0 0 10px 18px; font-size: 15.5px; line-height: 1.5; }
.pt-lista li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--acento); }
.pt-pie { text-align: center; padding-top: 10px; display: grid; gap: 12px; justify-items: center; }
.pt-act { font-size: 13px; color: var(--gris); margin: 0; }
#formPortal input { display: block; width: 100%; margin-top: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--tinta); background: transparent; font: 300 17px var(--sans); color: var(--tinta); border-radius: 0; }

/* ---------- Portada: fotos que rotan ---------- */
.hero-foto { opacity: 0; transition: opacity 1.4s ease; }
.hero-foto.activa { opacity: 1; }
.hero-flecha { position: absolute; z-index: 2; top: 40%; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.hero-flecha:hover { opacity: 1; }
.hero-flecha.ant { left: 4px; } .hero-flecha.sig { right: 4px; }
.hero-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.hero-puntos i { width: 18px; height: 1px; background: rgba(255,255,255,.4); transition: background .4s; }
.hero-puntos i.activo { background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-foto { transition: none; } }

/* ---------- Cita: horarios disponibles ---------- */
.horarios { border: 0; padding: 0; margin: 0; min-width: 0; }
.horarios .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.horarios #horHoras { margin-top: 12px; }

/* ---------- Galería larga (desfile): se muestran 18 y el resto al tocar el botón ---------- */
.mosaico.plegado .foto:nth-child(n+19) { display: none; }
/* ---------- Brittany Signature: aire para sus trazos altos ---------- */
.firma { line-height: 1.5; padding: 0 .12em; }
.titulo-firma .firma { display: block; padding-top: .45em; line-height: 1.35; }
.cta-final .firma { line-height: 1.7; }

/* ---------- Portada: el texto se adapta a la claridad de cada foto ----------
   La clase tl-claro / tt-claro la pone js/sitio.js según los datos "tl" (zona del logo) y
   "tt" (zona del texto) de cada foto en manifest.json: foto clara = texto oscuro. */
.hero::before { content: none !important; }
.hero::after { content: none !important; }
.velo { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
.velo-a { top: 0; height: 36%; } .velo-b { bottom: 0; height: 64%; }
.velo::before, .velo::after { content: ""; position: absolute; inset: 0; transition: opacity .9s ease; }
.velo-a::before { background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); }
.velo-a::after  { background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.32) 55%, rgba(255,255,255,0)); opacity: 0; }
.velo-b::before { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.5) 35%, rgba(0,0,0,.78) 65%, rgba(0,0,0,.92)); }
.velo-b::after  { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 35%, rgba(255,255,255,.82) 65%, rgba(255,255,255,.93)); opacity: 0; }
.hero.tl-claro .velo-a::before, .hero.tt-claro .velo-b::before { opacity: 0; }
.hero.tl-claro .velo-a::after,  .hero.tt-claro .velo-b::after  { opacity: 1; }
.hero-logo, .hero h1, .acceso, .acceso-novias, .acceso-novias span, .hero-flecha, .hero-puntos i { transition: color .8s, border-color .8s, background .8s, filter .8s; }
.hero.tl-claro .hero-logo { filter: brightness(0) drop-shadow(0 1px 14px rgba(255,255,255,.55)) !important; }
/* texto oscuro sobre fotos claras */
.hero.tt-claro .hero-texto { color: var(--tinta); }
.hero.tt-claro h1 { color: var(--tinta); }
.hero.tt-claro h1::before { background: rgba(28,27,26,.55); }
.hero.tt-claro .accesos { border-top-color: rgba(28,27,26,.3); }
.hero.tt-claro .acceso { color: var(--tinta); border-bottom-color: rgba(28,27,26,.3); }
.hero.tt-claro .acceso:nth-child(even) { border-right-color: rgba(28,27,26,.3); }
@media (min-width: 900px) { .hero.tt-claro .acceso { border-right-color: rgba(28,27,26,.3) !important; } }
.hero.tt-claro .acceso:hover, .hero.tt-claro .acceso:active { background: rgba(28,27,26,.08); }
.hero.tt-claro .acceso-principal { background: var(--tinta); color: #fff; }
.hero.tt-claro .acceso-principal:hover { background: #fff; color: var(--tinta); }
.hero.tt-claro .acceso-novias { color: rgba(28,27,26,.8); }
.hero.tt-claro .acceso-novias span { color: var(--tinta); border-bottom-color: rgba(28,27,26,.6); }
.hero.tt-claro .hero-flecha { color: var(--tinta); filter: drop-shadow(0 1px 6px rgba(255,255,255,.7)); }
.hero.tt-claro .hero-puntos i { background: rgba(28,27,26,.35); }
.hero.tt-claro .hero-puntos i.activo { background: var(--tinta); }
/* barra superior sobre la foto */
.hero-tl-claro .cabecera:not(.solida):not(.abierta) .menu-btn span { background: var(--tinta); }
@media (min-width: 900px) { .hero-tl-claro .cabecera:not(.solida):not(.abierta) .menu a { color: var(--tinta); } }

/* Brittany Signature no trae las tildes dibujadas: el generador marca la vocal con .ac y aquí se dibuja el acento */
.firma .ac { position: relative; display: inline-block; line-height: 1; }
.firma .ac::after { content: ""; position: absolute; left: .2em; top: .2em; width: .2em; height: .045em; border-radius: 2px; background: currentColor; transform: rotate(-40deg); }
/* Bridal Fashion Show: cifras y palabras destacadas en blanco para que contrasten con el fondo */
.desfile strong, .desfile .hechos strong { color: #fff; }

/* ---------- Ajustes de portada (13 nov): logo más pequeño y alto; el texto no tapa rostros ---------- */
.hero-marca { padding-top: clamp(58px, 8.5vh, 84px) !important; }
.hero-logo { width: min(66%, 300px) !important; }
.hero-texto { padding-top: 14px !important; padding-bottom: clamp(14px, 2.6vh, 28px) !important; }
.hero h1 { margin: 12px auto clamp(14px, 2.4vh, 22px) !important; padding-top: 14px !important; }
.acceso { min-height: 54px; padding: 9px 8px; }
.acceso-principal { min-height: 50px !important; }
.acceso-novias { margin-top: 10px; padding: 4px; }
.hero-puntos { margin-top: 8px; }
/* En el celular cada foto se acerca (--z, definido por foto en manifest.json) para que el rostro quede sobre el texto */
@media (max-width: 899px) { .hero-foto { transform: scale(var(--z, 1)); transform-origin: 50% 100%; } }
@media (min-width: 900px) { .hero-logo { width: 330px !important; } .hero-marca { padding-top: 70px !important; } }

.hero-fotos { position: absolute; inset: 0; } /* antes ocupaba un lugar en el flex y dejaba el logo a media altura */

/* ---------- Experiencia: pasos con iconos de línea + botones para cambiar de fase ---------- */
.panel-pasos { position: sticky; top: 68px; z-index: 6; background: rgba(251,250,248,.96); backdrop-filter: blur(6px); grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 6px; padding-bottom: 0; border-bottom: 1px solid var(--linea); max-width: none; }
.panel-pasos .panel-btn { border: 0; background: transparent; padding: 10px 2px 12px; gap: 5px; position: relative; color: var(--gris); }
.panel-pasos .panel-btn::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: var(--tinta); transform: scaleX(0); transition: transform .3s; }
.panel-pasos .panel-btn.activo { background: transparent; color: var(--tinta); }
.panel-pasos .panel-btn.activo::after { transform: scaleX(1); }
.panel-pasos .ico { width: 28px; height: 28px; max-width: none; }
.panel-pasos .panel-num { display: none; }
.panel-pasos .panel-nombre { font-size: 9.5px; letter-spacing: .1em; line-height: 1.25; }
@media (min-width: 760px) { .panel-pasos .panel-btn { padding: 16px 8px 16px; } .panel-pasos .ico { width: 32px; height: 32px; } .panel-pasos .panel-nombre { font-size: 12px; letter-spacing: .16em; } }
.fase-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(32px, 6vw, 56px); padding-top: 24px; border-top: 1px solid var(--linea); }
.fase-ir { display: grid; gap: 3px; padding: 14px 4px; text-decoration: none; color: var(--tinta); }
.fase-ir.sig { text-align: right; }
.fase-ir-tit { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.fase-ir-nom { font-size: 15px; }
.fase-ir.ant .fase-ir-nom::before { content: "← "; } .fase-ir.sig .fase-ir-nom::after { content: " →"; }
.fase-ir:hover .fase-ir-nom { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Guía de estilos: pestañas solo de texto, sin colores crema ---------- */
.panel-texto { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); max-width: none; }
.panel-texto .panel-btn { display: block; border: 0; background: transparent; padding: 12px 2px; position: relative; color: var(--gris); }
.panel-texto .panel-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tinta); transform: scaleX(0); transition: transform .3s; }
.panel-texto .panel-btn:hover { color: var(--tinta); }
.panel-texto .panel-btn.activo { background: transparent; color: var(--tinta); }
.panel-texto .panel-btn.activo::after { transform: scaleX(1); }
.panel-texto .panel-nombre { font-size: 12px; letter-spacing: .2em; }
.ficha-foto.es-boceto { background: #fff; border: 1px solid var(--linea); }

/* ==========================================================
   MI ESPACIO — lista de la boda, notas y herramientas de la novia
   ========================================================== */
.es-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.es-nav a { font-size: 10.5px; letter-spacing: .1em; text-align: center; text-transform: uppercase; padding: 13px 2px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); text-decoration: none; }
.es-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.es-tarea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--linea); }
.es-lista > .es-tarea:first-child { border-top: 0; }
.es-check { width: 26px; height: 26px; margin-top: 1px; border: 1px solid var(--tinta); background: #fff; border-radius: 50%; padding: 0; cursor: pointer; position: relative; flex: none; display: block; }
.es-check::after { content: ""; position: absolute; inset: -9px; }                 /* área de toque de 44 px */
.es-check[aria-pressed="true"], .es-hecha .es-check { background: var(--tinta); }
.es-check[aria-pressed="true"]::before, .es-hecha .es-check::before { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.es-bloqueado { cursor: default; border-style: dashed; border-color: var(--acento); }
.es-bloqueado::after { display: none; }
.es-texto { margin: 0; font-size: 15.5px; line-height: 1.45; }
.es-hecha .es-texto { color: var(--gris); text-decoration: line-through; text-decoration-color: rgba(111, 106, 99, .5); }
.es-no_aplica .es-texto, .es-pasada .es-texto { color: var(--gris); }
.es-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 4px 0 0; font-size: 12.5px; color: var(--gris); }
.es-meta:empty { display: none; }
.es-tarde { color: #a03325; }
.es-importante { color: #7a6650; letter-spacing: .04em; }
.es-chip { border: 1px solid var(--acento); padding: 0 8px; color: #7a6650; }
.es-mas { background: none; border: 0; font: 400 12px var(--sans); color: var(--gris); padding: 0 4px; min-width: 44px; min-height: 44px; margin-top: -9px; cursor: pointer; letter-spacing: .12em; }
.es-detalle { display: grid; gap: 14px; margin-top: 14px; }
.es-detalle label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); display: grid; gap: 6px; }
.es-detalle select, .es-detalle textarea, .es-nueva input, .es-notas { font: 400 16px var(--sans); border: 1px solid var(--linea); background: #fff; padding: 11px 12px; width: 100%; border-radius: 0; color: var(--tinta); letter-spacing: 0; text-transform: none; }
.es-detalle textarea, .es-notas { resize: vertical; line-height: 1.5; }
.es-notas { min-height: 190px; }
.es-quitar, .es-ver-cats { background: none; border: 0; padding: 10px 0; font: 400 13.5px var(--sans); color: var(--gris); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.es-acordeon { width: 100%; display: flex; align-items: baseline; gap: 12px; background: none; border: 0; border-top: 1px solid var(--linea); padding: 16px 0; font: 400 16px var(--sans); cursor: pointer; text-align: left; color: var(--tinta); }
.es-acordeon span { flex: 1; min-width: 0; }
.es-acordeon small { color: var(--gris); font-size: 12.5px; white-space: nowrap; }
.es-acordeon::after { content: "+"; font-size: 20px; line-height: 1; color: var(--gris); }
.es-acordeon[aria-expanded="true"]::after { content: "−"; }
.es-acordeon em { font-style: normal; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #7a6650; border: 1px solid var(--acento); padding: 1px 8px; margin-left: 8px; white-space: nowrap; }
.es-avance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.es-avance strong { font-size: clamp(30px, 9vw, 40px); font-weight: 400; font-variant-numeric: tabular-nums; }
.es-avance span { color: var(--gris); font-size: 14.5px; }
.es-cats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.es-cats li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14.5px; }
.es-cats b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--gris); }
.es-cats i { grid-column: 1 / -1; height: 3px; background: var(--fondo-2); position: relative; }
.es-cats i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--acento); }
.es-propia { margin-top: 26px; border-top: 1px solid var(--linea); padding-top: 22px; }
.es-propia h3 { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; color: var(--gris); margin: 0 0 12px; }
.es-nueva { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.es-nueva .btn { padding: 14px 18px; }
@media (min-width: 520px) { .es-nueva { grid-template-columns: 1fr auto auto; } }
.es-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.es-aviso { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 12px 18px; width: max-content; max-width: min(92vw, 420px); font-size: 14.5px; line-height: 1.4; z-index: 60; margin: 0; }
.es-aviso[hidden] { display: none; }
.es-hoy .es-lista { margin-top: -4px; }
.es-check:focus-visible, .es-mas:focus-visible, .es-acordeon:focus-visible, .es-nav a:focus-visible, .es-quitar:focus-visible, .es-ver-cats:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
html { scroll-padding-top: 76px; }
.en-espacio .wa-flotante { display: none; }

/* ---------- Mi Espacio: reloj, ajuar, recuerdos, directorio, consejos, planificador ---------- */
.es-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.es-nav::-webkit-scrollbar { display: none; }
.es-nav a { flex: none; padding: 13px 14px; }
.es-reloj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px auto 0; max-width: 420px; }
.es-reloj div { border: 1px solid var(--linea); background: #fff; padding: 14px 4px 10px; display: grid; gap: 4px; }
.es-reloj b { font-size: clamp(26px, 8.5vw, 38px); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.es-reloj small { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.es-estado { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.2; margin: 0 0 16px; }
.es-contacto { display: grid; gap: 8px; }
.es-contacto .btn { padding: 15px 10px; font-size: 11.5px; letter-spacing: .14em; }
.es-proveedor { color: var(--tinta); }
.es-rec { border-left: 2px solid var(--acento); padding-left: 12px; }
.es-rec > p { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin: 0 0 6px; }
.es-provs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.es-prov { display: grid; gap: 2px; font-size: 15px; }
.es-prov b { font-weight: 500; }
.es-prov small { color: var(--gris); font-size: 13px; }
.es-rubro { margin-top: 18px; }
.es-rubro h3 { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--gris); margin: 0 0 8px; }
.es-recuerdos { background: var(--fondo-2); }
.es-cita { font-size: 17px; line-height: 1.55; margin: 0 0 8px; padding: 0 0 14px; border-bottom: 1px solid var(--linea); }
.es-consejo { border-top: 1px solid var(--linea); }
.es-consejo:first-of-type { border-top: 0; }
.es-consejo .es-acordeon { border-top: 0; }
.es-consejo-texto { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--gris); }
.es-plan .btn { font-family: inherit; cursor: pointer; }
.es-volver-caja { margin: 0; }
.es-num, .es-cot input, .es-cot select { font: 400 16px var(--sans); border: 1px solid var(--linea); background: #fff; padding: 12px; width: 100%; border-radius: 0; color: var(--tinta); }
.es-num { margin-bottom: 14px; }
.es-cot { display: grid; gap: 8px; }
.es-cot .btn { padding: 15px 18px; }
.es-cots { list-style: none; margin: 0; padding: 0; display: grid; }
.es-cotiza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--linea); align-items: start; }
.es-cots > .es-cotiza:first-child { border-top: 0; }
.es-cotiza > div:first-child { display: grid; gap: 3px; min-width: 0; }
.es-cotiza b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.es-precio { font-size: 22px; font-variant-numeric: tabular-nums; }
.es-precio em { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7a6650; border: 1px solid var(--acento); padding: 1px 6px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.es-cotiza small { color: var(--gris); font-size: 13px; overflow-wrap: anywhere; }
.es-cot-acc { display: grid; gap: 4px; justify-items: end; }
.es-cot-acc .btn { padding: 11px 16px; font-size: 11px; letter-spacing: .12em; min-width: 96px; }
.es-elegida .es-precio { font-weight: 500; }
.es-centro { text-align: center; }
.es-detalle input[type=text] { font: 400 16px var(--sans); border: 1px solid var(--linea); background: #fff; padding: 11px 12px; width: 100%; border-radius: 0; color: var(--tinta); letter-spacing: 0; text-transform: none; }
.es-contacto .btn, .es-cot .btn { cursor: pointer; text-align: center; }

/* Directorio de proveedores con logotipo y descuento */
.es-prov { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linea); }
.es-provs > .es-prov:first-child { border-top: 0; }
.es-logo { width: 112px; height: 64px; object-fit: contain; object-position: left center; display: block; }
.es-prov > div { display: grid; gap: 3px; min-width: 0; }
.es-prov b { font-weight: 500; overflow-wrap: anywhere; }
.es-dcto { color: #7a6650; font-size: 13.5px; }
.es-consejo .es-provs { margin: 0 0 12px; }



/* ---------- Mi Espacio: retoque (reloj discreto, botones del ajuar, centro de planificación) ---------- */
.es-reloj { display: flex; justify-content: center; align-items: baseline; gap: 14px; max-width: none; margin: 12px 0 0; }
.es-reloj span { color: var(--gris); font-size: 12px; letter-spacing: .06em; }
.es-reloj b { font-size: 19px; font-weight: 300; color: var(--tinta); font-variant-numeric: tabular-nums; margin-right: 1px; }
.es-reloj div { all: unset; }
.es-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.es-nav a { padding: 13px 2px; text-align: center; }
.es-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .es-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-baldosa { position: relative; display: grid; align-content: start; gap: 6px; justify-items: start; text-align: left; padding: 16px 14px 14px; min-height: 104px; background: #fff; border: 1px solid var(--linea); border-radius: 0; color: var(--tinta); font: inherit; cursor: pointer; }
.es-baldosa:hover { border-color: var(--tinta); }
.es-baldosa.es-sel { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.es-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--tinta); }
.es-svg { width: 28px; height: 28px; display: block; }
.es-espejo { transform: scaleX(-1); }
.es-bt { font-size: 14.5px; line-height: 1.25; }
.es-bs { font-size: 12px; color: var(--gris); line-height: 1.3; overflow-wrap: anywhere; }
.es-baldosa.es-listo .es-ico { color: #7a6650; }
.es-baldosa.es-listo::after { content: ""; position: absolute; top: 12px; right: 14px; width: 6px; height: 11px; border: solid #7a6650; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.es-grande { min-height: 120px; }
.es-grande .es-bt { font-size: 15.5px; }
.es-hub { margin-top: 4px; }
.es-ficha { margin-top: 10px; padding: 18px 16px; border: 1px solid var(--tinta); background: #fff; display: grid; gap: 12px; }
.es-ficha-cab { display: flex; align-items: center; gap: 12px; }
.es-ficha-cab h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 400; }
.es-cerrar { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--gris); cursor: pointer; width: 44px; height: 44px; }
.es-ficha .pt-nota { margin: 0; }
.es-listo-btn { width: 100%; padding: 14px 10px; font-size: 11.5px; letter-spacing: .14em; cursor: pointer; }
.es-cab { padding-bottom: 4px; }
.es-actualizado { margin: 12px 0 0; font-size: 11.5px; color: var(--gris); }
.es-aviso-prov { font-size: 13px; line-height: 1.5; color: #5d4f3d; background: var(--fondo-2); border-left: 2px solid var(--acento); padding: 10px 12px; margin: 0 0 12px; }
.es-vigencia { color: #7a6650; font-size: 11.5px; line-height: 1.4; }
.es-lima { align-self: start; justify-self: start; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: #7a6650; padding: 2px 8px; }
.es-ciudad { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.es-sinconv { color: var(--gris); font-style: italic; }
.pt-pie { text-align: center; padding-top: 6px; }

/* ---------- Mi Espacio: fichas del ajuar en pantalla aparte, revisión de pagos, consejos desplegables ---------- */
.es-ficha { margin-top: 0; border: 1px solid var(--linea); padding: 22px 20px; display: grid; gap: 14px; }
.es-ficha-ico { display: grid; place-items: center; }
.es-ico-grande { width: 64px; height: 64px; }
.es-ico-grande .es-svg { width: 56px; height: 56px; }
.es-centro { text-align: center; }
.es-aviso-ficha { border-left: 2px solid var(--acento); background: var(--fondo-2); padding: 12px 14px; display: grid; gap: 10px; }
.es-aviso-ficha p { margin: 0; font-size: 15px; line-height: 1.5; }
.es-aviso-ficha .btn { padding: 13px 10px; font-size: 11px; letter-spacing: .14em; text-align: center; }
.es-rec .es-logo { display: block; }
.es-inicial { display: grid; place-items: center; width: 112px; height: 64px; object-fit: unset; background: var(--fondo-2); color: #7a6650; font-size: 26px; font-weight: 300; letter-spacing: .04em; }
.es-revision { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); display: grid; gap: 10px; }
.es-revision p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.es-revision .btn { padding: 14px 10px; font-size: 11px; letter-spacing: .14em; text-align: center; }
.es-acordeon-titulo { border-top: 0; padding: 0; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); }
.es-acordeon-titulo + .es-consejo { margin-top: 10px; }

/* Íconos centrados; el tacón es una imagen usada como máscara */
.es-mask { background: currentColor; -webkit-mask: url(../img/iconos/tacon.png) center / contain no-repeat; mask: url(../img/iconos/tacon.png) center / contain no-repeat; }
.es-baldosa { justify-items: center; text-align: center; align-content: center; }
.es-bs { text-align: center; }
.es-baldosa .es-ico { width: 34px; height: 34px; }
.es-baldosa .es-svg { width: 30px; height: 30px; }
.es-ficha-ico .es-ico-grande { width: 72px; height: 72px; }
.es-ficha-ico .es-ico-grande .es-svg { width: 62px; height: 62px; }