/* =========================================================
   Mi cuenta · Gran Edén
   El pavo real dentro de un arco (la forma del logo) y, al lado, la cuenta.
   Usa los colores, tipografías, botones y campos de la web (../styles.css).
   ========================================================= */

.c [hidden]{ display:none !important; }

/* ---------- Cabecera ---------- */
.c-cab{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--wrap); margin:0 auto;
  padding:max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
}
.c-marca img{ height:24px; width:auto; }
@media (min-width:600px){ .c-marca img{ height:28px; } }
.c-volver{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:500 14.5px/1 var(--sans); color:var(--text-2); text-decoration:none; transition:color .2s ease;
}
.c-volver svg{ width:18px; height:18px; transition:transform .3s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .c-volver:hover{ color:var(--gold-b); }
  .c-volver:hover svg{ transform:translateX(-3px); }
}

/* ---------- Composición: arco + contenido ---------- */
.c-main{
  display:grid; gap:26px; max-width:var(--wrap); margin:0 auto;
  padding:4px var(--gutter) max(64px, env(safe-area-inset-bottom));
}
@media (min-width:980px){
  .c-main{ grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(48px, 6vw, 110px); align-items:start; padding-top:18px; }
}

.c-arco{
  position:relative; overflow:hidden; isolation:isolate;
  width:min(46vw, 190px); aspect-ratio:4 / 5; margin:0 auto;
  border-radius:999px 999px 0 0; border:1px solid rgba(209,167,82,.55);
  background:var(--surface);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.95), 0 0 40px -18px rgba(209,167,82,.35);
}
/* Un segundo arco dorado por dentro, como en el logo */
.c-arco::after{
  content:""; position:absolute; inset:9px 9px -1px; z-index:1; pointer-events:none;
  border:1px solid rgba(234,207,120,.34); border-bottom:0; border-radius:inherit;
}
.c-arco video{ width:100%; height:100%; object-fit:cover; }
@media (min-width:980px){
  .c-arco{ position:sticky; top:28px; width:100%; max-height:calc(100svh - 150px); aspect-ratio:3 / 4; margin:0; }
  .c-arco::after{ inset:14px 14px -1px; }
}
/* En «Mi cuenta», en el móvil, el arco se queda pequeño para que se vea antes lo importante */
@media (max-width:979px){ .c.en-cuenta .c-arco{ width:min(34vw, 132px); } }

.c-contenido{ min-width:0; width:100%; max-width:620px; margin:0 auto; }
@media (min-width:980px){ .c-contenido{ margin:0; padding-top:10px; } }

/* ---------- Vistas ---------- */
.c-vista.entra{ animation:c-entra .5s var(--ease-out) backwards; }
@keyframes c-entra{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce){ .c-vista.entra{ animation:none; } }
.c-vista--cargando p{ padding:48px 0; color:var(--text-3); }

.c-titulo{
  margin:12px 0 16px;
  font:400 clamp(40px, 9vw, 64px)/1.02 var(--serif); letter-spacing:-.022em;
}
.c-titulo:focus{ outline:none; }
.c-titulo em{
  font-style:italic; padding-right:.06em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.c-intro{ max-width:44ch; margin-bottom:26px; color:var(--text-2); }

/* ---------- Formularios (los campos son los de la web) ---------- */
.c-form{ display:grid; gap:18px; }
@media (min-width:600px){ .c-fila{ grid-template-columns:1fr 1fr; } }
.c-clave{ position:relative; }
.c-clave input{ padding-right:54px !important; }
.c-ver{
  position:absolute; top:50%; right:5px; transform:translateY(-50%);
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:999px; background:transparent; color:var(--text-3); cursor:pointer;
  transition:color .2s ease;
}
.c-ver svg{ width:20px; height:20px; }
.c-ver:hover, .c-ver[aria-pressed="true"]{ color:var(--text); }
.c-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:4px; }
.c-etiqueta{ font:500 13.5px/1.3 var(--sans); color:var(--text-2); }
.c-fijo{ display:flex; align-items:center; min-height:50px; color:var(--text-2); overflow-wrap:anywhere; }

.c-link{
  padding:0; border:0; background:none; cursor:pointer;
  font:400 15px/1.5 var(--sans); color:var(--gold-b);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(234,207,120,.4);
}
.c-link--peligro{ color:var(--error); text-decoration-color:rgba(236,139,115,.4); }
.c-alt{ margin-top:28px; font-size:15px; color:var(--text-2); }
.c-nota{ font-size:14px; line-height:1.5; color:var(--text-3); }
.c-nota a{ color:var(--gold-b); text-underline-offset:3px; text-decoration-color:rgba(234,207,120,.4); }

.c-error{
  padding:10px 14px; border-radius:12px; font-size:14.5px; line-height:1.45; color:var(--error);
  background:rgba(236,139,115,.1); border:1px solid rgba(236,139,115,.35);
}
.c-hecho, .c-aviso{
  padding:14px 16px; border-radius:14px; color:var(--text-2);
  border-left:2px solid var(--gold); background:rgba(209,167,82,.07);
}
.c-hecho:focus{ outline:none; }
.c-aviso{ margin-bottom:22px; }
.c-aviso.is-mal{ color:var(--error); border-left-color:var(--error); background:rgba(236,139,115,.08); }

/* ---------- Mi cuenta ---------- */
.c-banda{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px;
  margin-bottom:18px; padding:14px 14px 14px 18px; border-radius:18px;
  font-size:15px; line-height:1.5; color:#F6C98A;
  border:1px solid rgba(241,165,58,.35); background:rgba(241,165,58,.08);
}
.c-banda p{ min-width:0; overflow-wrap:anywhere; }
.c-banda strong{ font-weight:500; color:#F8D7A6; }

.c-bloque{
  margin-top:16px; padding:24px 20px; border-radius:var(--r-card);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--elev);
}
@media (min-width:600px){ .c-bloque{ padding:28px 30px; } }
.c-bloque h2{ margin-bottom:16px; font:400 26px/1.15 var(--serif); letter-spacing:-.01em; }

/* Reserva en un clic: lo que falta, con su marca dorada al completarse */
.c-unclic{
  border-color:rgba(209,167,82,.3);
  background:radial-gradient(120% 140% at 100% 0%, rgba(209,167,82,.14), transparent 55%), var(--card);
}
.c-listo{ margin-bottom:4px; color:var(--text-2); }
.c-pasos{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.c-pasos li{ display:flex; align-items:center; gap:12px; color:var(--text-3); transition:color .3s ease; }
.c-marca-paso{
  display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); transition:background-color .3s ease, border-color .3s ease;
}
.c-marca-paso svg{ width:15px; height:15px; opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .35s var(--spring); }
.c-pasos li.is-hecho{ color:var(--text); }
.c-pasos li.is-hecho .c-marca-paso{ background:var(--gold-grad); border-color:transparent; color:var(--on-gold); }
.c-pasos li.is-hecho svg{ opacity:1; transform:none; }
.c-unclic .btn{ margin-top:20px; }

/* Tarjeta guardada */
.c-tarjeta{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px 16px; }
.c-tarjeta__ico{
  display:grid; place-items:center; width:54px; height:38px; border-radius:9px; color:var(--gold-b);
  background:linear-gradient(135deg, rgba(234,207,120,.24), rgba(209,167,82,.06)); border:1px solid rgba(234,207,120,.42);
}
.c-tarjeta__ico svg{ width:22px; height:22px; }
.c-tarjeta p{ display:grid; gap:2px; min-width:0; }
.c-tarjeta strong{ font:400 21px/1.2 var(--serif); }
.c-tarjeta p span{ font-size:14px; color:var(--text-3); }
.c-tarjeta .c-botones{ grid-column:1 / -1; }
.c-botones{ display:flex; flex-wrap:wrap; gap:10px; }
.c-nueva-tarjeta .c-botones{ justify-content:space-between; margin-top:22px; }
.c-nota + .btn{ margin-top:16px; }

/* Reservas */
.c-reservas{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.c-reserva{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px 14px;
  padding:12px 14px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.c-reserva.is-pasada, .c-reserva.is-cerrada{ opacity:.62; }
.c-ficha{ width:54px; text-align:center; }
.c-ficha b{ display:block; font:400 30px/1 var(--serif); font-weight:400; }
.c-ficha small{ font:500 10.5px/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.c-reserva p{ display:grid; min-width:0; }
.c-reserva p strong{ font-weight:500; }
.c-reserva p span{ font-size:14px; color:var(--text-3); }
.c-estado{
  padding:7px 11px; border-radius:999px; white-space:nowrap;
  font:500 12.5px/1 var(--sans); color:var(--text-2); border:1px solid rgba(255,255,255,.14);
}
.c-estado.is-ok{ color:var(--gold-b); background:rgba(209,167,82,.12); border-color:rgba(209,167,82,.45); }
.c-estado.is-espera{ color:#F6C98A; background:rgba(241,165,58,.1); border-color:rgba(241,165,58,.4); }
@media (max-width:479px){
  .c-reserva{ grid-template-columns:auto minmax(0,1fr); }
  .c-estado{ grid-column:2; justify-self:start; }
}
.c-vacio{ color:var(--text-3); }
.c-vacio a{ color:var(--gold-b); }

/* Cambiar la contraseña (plegado) */
.c-plegable summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; }
.c-plegable summary::-webkit-details-marker{ display:none; }
.c-plegable summary h2{ margin:0; }
.c-plegable summary::after{
  content:""; flex:none; width:10px; height:10px; margin-right:6px;
  border-right:1.6px solid var(--gold-b); border-bottom:1.6px solid var(--gold-b);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease-out);
}
.c-plegable[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.c-plegable[open] summary{ margin-bottom:18px; }
.c-plegable summary:focus-visible{ outline:2px solid var(--gold-b); outline-offset:6px; border-radius:8px; }

.c-pie{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; }

/* ---------- Diálogo de borrar la cuenta ---------- */
.c-dialogo{
  width:min(440px, calc(100vw - 32px)); padding:28px 26px; border-radius:var(--r-card);
  color:var(--text); background:var(--card); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -30px rgba(0,0,0,.95);
}
.c-dialogo::backdrop{ background:rgba(2,8,4,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.c-dialogo form{ display:grid; gap:14px; }
.c-dialogo h2{ font:400 30px/1.1 var(--serif); letter-spacing:-.01em; }
.c-dialogo p{ color:var(--text-2); }
.c-dialogo .c-botones{ justify-content:flex-end; margin-top:6px; }
.c-btn-peligro{ color:#F6B3A2; background:rgba(236,139,115,.14); border-color:rgba(236,139,115,.55); }
@media (hover:hover) and (pointer:fine){ .c-btn-peligro:hover{ background:rgba(236,139,115,.22); } }

/* ---------- Aviso flotante ---------- */
.c-toast{
  position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); z-index:60;
  max-width:calc(100vw - 32px); padding:12px 20px; border-radius:999px; transform:translateX(-50%);
  font-size:15px; line-height:1.4; color:var(--text); text-align:center;
  background:rgba(12,26,18,.94); border:1px solid rgba(234,207,120,.4);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  animation:c-entra .4s var(--ease-out) backwards;
}
.c-toast.is-mal{ border-color:rgba(236,139,115,.55); color:#F6B3A2; }