/* ===========================================================================
   Pasarela - hoja de estilo unica
   Paleta editorial: fondo tinta, texto marfil, acento champan.
   =========================================================================== */

:root {
  --tinta:      #0e0d10;
  --tinta-2:    #15141a;
  --panel:      #1b1a21;
  --panel-alto: #23212b;
  --borde:      #2e2b38;
  --borde-sutil:#241f2c;

  --marfil:     #f4f0ea;
  --suave:      #b4adc0;
  --tenue:      #8a8398;

  --champan:    #d8b26a;
  --champan-alto:#edcd8d;
  --rosa:       #d98a9a;
  --verde:      #74c49b;
  --rojo:       #e2706e;

  --radio:      14px;
  --radio-s:    9px;
  --sombra:     0 18px 48px rgba(0,0,0,.45);
  --sombra-s:   0 4px 18px rgba(0,0,0,.30);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ancho: 1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  -webkit-tap-highlight-color: rgba(216,178,106,.18);
  background: var(--tinta);
  color: var(--marfil);
  font: 16px/1.6 var(--sans);
  letter-spacing: .005em;
  /* Textura muy leve para que el negro no se vea plano. */
  background-image:
    radial-gradient(900px 500px at 12% -5%, rgba(216,178,106,.07), transparent 70%),
    radial-gradient(700px 480px at 92% 8%, rgba(217,138,154,.05), transparent 70%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--marfil); text-decoration: none; }
a:hover { color: var(--champan-alto); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1em; }

small { font-size: .82rem; }

::selection { background: var(--champan); color: #17140e; }

:focus-visible {
  outline: 2px solid var(--champan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* El encabezado va pegado arriba: sin esto, saltar a un ancla deja el titulo
   escondido debajo. */
[id] { scroll-margin-top: 84px; }

/* --- Estructura ---------------------------------------------------------- */

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

.seccion { padding: 44px 0; }
.seccion--ap { padding: 20px 0 44px; }

.seccion__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.seccion__cabeza h2 { margin: 0; }
/* En la portada el encabezado va centrado: titulo arriba y el enlace debajo,
   en el eje de la grilla, para que la columna no quede descompensada. */
.seccion__cabeza--centro {
  flex-direction: column; align-items: center; text-align: center;
  gap: 8px; margin-bottom: 26px;
}
.seccion__cabeza a { color: var(--champan); font-size: .9rem; letter-spacing: .04em; }

.sobretitulo {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--champan);
  margin: 0 0 10px;
}

.silencio { color: var(--tenue); }
.suave    { color: var(--suave); }

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,13,16,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-sutil);
}
.cabecera__fila {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}
.marca {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 600;
  letter-spacing: .02em; display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.marca__logo {
  width: 18px; height: 24px; flex: none;
  filter: drop-shadow(0 0 10px rgba(216,178,106,.35));
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav a {
  padding: 8px 12px; border-radius: 999px; font-size: .92rem; color: var(--suave);
}
.nav a:hover, .nav a.activo { color: var(--marfil); background: var(--panel); }

.cabecera__buscar { margin-left: auto; position: relative; }
.cabecera__buscar input[type=search] {
  width: 210px; padding: 9px 14px 9px 36px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 999px; color: var(--marfil); font: inherit; font-size: .9rem;
}
.cabecera__buscar input[type=search]::placeholder { color: var(--tenue); }
.cabecera__buscar input[type=search]:focus { border-color: var(--champan); outline: none; }
.cabecera__buscar svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--tenue); pointer-events: none;
}
.cabecera__acciones { display: flex; align-items: center; gap: 8px; }

.menu-boton {
  display: none; background: none; border: 1px solid var(--borde);
  color: var(--marfil); border-radius: var(--radio-s); padding: 8px 10px; cursor: pointer;
}

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer;
  transition: transform .12s ease, background .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap; text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--oro {
  background: linear-gradient(135deg, var(--champan-alto), var(--champan));
  color: #19140a; font-weight: 600;
}
.btn--oro:hover { color: #19140a; filter: brightness(1.07); }

.btn--borde { border-color: var(--borde); color: var(--marfil); background: transparent; }
.btn--borde:hover { border-color: var(--champan); color: var(--champan-alto); }

.btn--lleno { background: var(--panel-alto); color: var(--marfil); }
.btn--lleno:hover { background: #2c2936; color: var(--marfil); }

.btn--fantasma { color: var(--suave); }
.btn--fantasma:hover { color: var(--marfil); background: var(--panel); }

.btn--peligro { border-color: rgba(226,112,110,.4); color: var(--rojo); }
.btn--peligro:hover { background: rgba(226,112,110,.12); color: var(--rojo); }

.btn--bloque { width: 100%; }
.btn--s { padding: 7px 13px; font-size: .84rem; }
.btn--g { padding: 13px 26px; font-size: 1rem; }

/* --- Insignias ---------------------------------------------------------- */

.insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .73rem; font-weight: 600; letter-spacing: .04em;
  background: var(--panel-alto); color: var(--suave);
  border: 1px solid var(--borde);
}
.insignia--oro   { background: rgba(216,178,106,.14); color: var(--champan-alto); border-color: rgba(216,178,106,.35); }
.insignia--rosa  { background: rgba(217,138,154,.14); color: var(--rosa);        border-color: rgba(217,138,154,.3); }
.insignia--verde { background: rgba(116,196,155,.13); color: var(--verde);       border-color: rgba(116,196,155,.3); }
.insignia--roja  { background: rgba(226,112,110,.13); color: var(--rojo);        border-color: rgba(226,112,110,.3); }

.verificado { color: var(--champan); display: inline-flex; vertical-align: middle; }
.verificado svg { width: 15px; height: 15px; }

/* --- Avatares ----------------------------------------------------------- */

.avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--panel-alto); flex: none;
}
.avatar--g { width: 104px; height: 104px; }
.avatar--m { width: 56px; height: 56px; }
.avatar--s { width: 30px; height: 30px; }
.avatar--inicial {
  display: grid; place-items: center;
  font-family: var(--serif); color: var(--champan);
  background: linear-gradient(145deg, #2a2733, #1b1a21);
  border: 1px solid var(--borde);
}

/* --- Grillas ------------------------------------------------------------ */

.grilla { display: grid; gap: 18px; }

/* En la portada las grillas se centran: con rejilla, una ultima fila a medias
   queda pegada a la izquierda y descuadra la seccion. Con flex se centra sola,
   y el tope de ancho evita que dos tarjetas solas se estiren hasta deformarse. */
.centrada .grilla { display: flex; flex-wrap: wrap; justify-content: center; }
.centrada .grilla > * { flex: 1 1 236px; max-width: 300px; }
.grilla--modelos { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.grilla--looks   { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grilla--2       { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* --- Tarjeta de modelo -------------------------------------------------- */

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde-sutil);
  border-radius: var(--radio); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
@media (hover: hover) {
  .tarjeta:hover { border-color: var(--borde); transform: translateY(-3px); box-shadow: var(--sombra-s); }
}

.tarjeta__foto { position: relative; display: block; background: var(--panel-alto); }
.tarjeta__foto img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.tarjeta__foto--vacia {
  aspect-ratio: 3/4; display: grid; place-items: center;
  background: linear-gradient(150deg, #262430, #17161c);
  color: var(--tenue); font-family: var(--serif); font-size: .9rem;
}
.tarjeta__cinta {
  position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap;
}
.tarjeta__esquina { position: absolute; top: 10px; right: 10px; }

.tarjeta__cuerpo { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tarjeta__nombre {
  font-family: var(--serif); font-size: 1.07rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px; line-height: 1.25;
}
.tarjeta__meta { font-size: .82rem; color: var(--tenue); display: flex; gap: 10px; flex-wrap: wrap; }
.tarjeta__pie {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--borde-sutil);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .84rem;
}
.precio { color: var(--champan-alto); font-weight: 600; }

/* Tarjeta de la portada: todo centrado y todas de la misma altura. Sin el
   min-height, un nombre de dos lineas desalinea su fila entera. */
.tarjeta--compacta .tarjeta__cuerpo { align-items: center; text-align: center; gap: 6px; }
.tarjeta--compacta .tarjeta__nombre {
  /* Con el nombre de pila ya no se parte en dos lineas: basta reservar una. */
  justify-content: center; min-height: 1.4em; align-items: center;
}
.tarjeta--compacta .tarjeta__nombre a { display: inline-flex; align-items: baseline; gap: 7px; }
/* La edad acompana al nombre, no compite con el. */
.tarjeta__edad {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  color: var(--champan); letter-spacing: .02em;
}
.tarjeta--compacta .tarjeta__meta { justify-content: center; gap: 8px; }
.tarjeta--compacta .tarjeta__meta span + span::before {
  content: '\00b7'; margin-right: 8px; opacity: .55;
}
.tarjeta--compacta .tarjeta__pie { justify-content: center; width: 100%; }

/* --- Tarjeta de look ---------------------------------------------------- */

.look-tarjeta { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--panel); }
.look-tarjeta__img { position: relative; display: block; }
.look-tarjeta__img img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform .45s ease; }
@media (hover: hover) {
  .look-tarjeta:hover .look-tarjeta__img img { transform: scale(1.035); }
}
.look-tarjeta__velo {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 45%, rgba(8,7,10,.9));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; gap: 4px;
}
.look-tarjeta__titulo {
  font-family: var(--serif); font-size: 1rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.look-tarjeta__autora { font-size: .8rem; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.look-tarjeta__stats {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 6px;
  font-size: .76rem; color: var(--marfil);
}
.pastilla {
  background: rgba(10,9,12,.72); backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
}

/* Candado sobre contenido bloqueado */
.bloqueado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  /* La tarjeta ya tiene las pastillas arriba y el titulo abajo: la caja se
     centra en el hueco que queda, no en la tarjeta entera, o se encima. */
  padding: 42px 10px 78px;
}
.bloqueado__caja {
  /* Son spans: sin esto el candado y el texto caen en la misma linea y el
     margen del icono no hace nada. */
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; padding: 14px 12px; background: rgba(12,11,15,.62);
  backdrop-filter: blur(2px); border-radius: var(--radio-s); max-width: 88%;
}
.bloqueado__icono { display: block; color: var(--champan); line-height: 0; }
.bloqueado__icono svg { width: 24px; height: 24px; }
.bloqueado__texto {
  font-size: .8rem; line-height: 1.35; color: var(--marfil);
  text-wrap: balance;
}

/* --- Filtros ------------------------------------------------------------ */

.filtros {
  background: var(--panel); border: 1px solid var(--borde-sutil);
  border-radius: var(--radio); padding: 16px; margin-bottom: 26px;
}
.filtros__fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 150px; }
.campo label { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], select, textarea {
  /* Safari da a los search su propio aspecto y se come el padding. */
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 10px 13px; background: var(--tinta-2);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  color: var(--marfil); font: inherit; font-size: .94rem;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--champan); outline: none; }
select { appearance: none; background-image: none; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--tenue); }

.casilla { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--suave); cursor: pointer; }
.casilla input { width: 17px; height: 17px; accent-color: var(--champan); flex: none; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Una sola linea que se arrastra de lado: trece pastillas envueltas ocupan
   media pantalla de telefono y se leen como un muro. */
.chips--fila {
  flex-wrap: nowrap;
  /* 'safe' centra solo si cabe: sin el, al desbordar se corta por la izquierda
     y las primeras pastillas quedan fuera de alcance. */
  justify-content: safe center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips--fila::-webkit-scrollbar { display: none; }
.chips--fila > * { flex: none; }

.tira { position: relative; }
.chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--borde);
  font-size: .86rem; color: var(--suave); background: transparent; cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--champan); color: var(--champan-alto); }
.chip--on { background: rgba(216,178,106,.14); border-color: var(--champan); color: var(--champan-alto); }

/* Etiquetas como casillas ocultas en los formularios */
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check input:checked + span {
  background: rgba(216,178,106,.16); border-color: var(--champan); color: var(--champan-alto);
}
.chip-check span {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--borde); font-size: .86rem; color: var(--suave); cursor: pointer;
}

/* --- Perfil ------------------------------------------------------------- */

.portada {
  height: 260px; background: linear-gradient(140deg, #272433, #16151b);
  position: relative; overflow: hidden; border-radius: 0 0 var(--radio) var(--radio);
}
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgba(14,13,16,.92));
}

.perfil__cabeza {
  display: flex; gap: 22px; align-items: flex-end;
  margin-top: -56px; position: relative; z-index: 2; flex-wrap: wrap;
}
.perfil__avatar {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--tinta); background: var(--panel-alto); flex: none;
}
.perfil__id { flex: 1 1 260px; padding-bottom: 6px; }
.perfil__nombre { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; flex-wrap: wrap; }
.perfil__titular { color: var(--suave); margin: 4px 0 0; }
.perfil__acciones { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; }

.perfil__cifras {
  display: flex; gap: 26px; flex-wrap: wrap; margin: 24px 0 0;
  padding: 16px 0; border-top: 1px solid var(--borde-sutil); border-bottom: 1px solid var(--borde-sutil);
}
.perfil__cifras div { font-size: .86rem; color: var(--tenue); }
.perfil__cifras b { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--marfil); font-weight: 600; }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.ficha div { background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio-s); padding: 12px 14px; }
.ficha dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.ficha dd { margin: 5px 0 0; font-size: .98rem; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde-sutil); margin: 26px 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pestanas a {
  padding: 11px 16px; font-size: .92rem; color: var(--tenue);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestanas a:hover { color: var(--marfil); }
.pestanas a.activo { color: var(--champan-alto); border-bottom-color: var(--champan); }

/* --- Detalle de look ---------------------------------------------------- */

.look { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 34px; align-items: start; }
.visor { display: flex; flex-direction: column; gap: 12px; }
.visor__principal { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--panel); }
.visor__principal img { width: 100%; max-height: 82vh; object-fit: contain; background: #0b0a0d; }
.visor__tiras { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.visor__tiras button {
  flex: none; width: 74px; padding: 0; border: 2px solid transparent;
  border-radius: var(--radio-s); overflow: hidden; background: none; cursor: pointer;
}
.visor__tiras button.on { border-color: var(--champan); }
.visor__tiras img { aspect-ratio: 3/4; object-fit: cover; }

.lateral { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 86px; }
.caja {
  background: var(--panel); border: 1px solid var(--borde-sutil);
  border-radius: var(--radio); padding: 18px;
}
.caja h3 { margin: 0 0 12px; font-size: 1.05rem; }
.caja--oro { border-color: rgba(216,178,106,.3); background: linear-gradient(170deg, rgba(216,178,106,.07), var(--panel)); }

.autora-fila { display: flex; align-items: center; gap: 12px; }
.autora-fila__id { flex: 1; min-width: 0; }
.autora-fila__nombre { font-family: var(--serif); font-size: 1.05rem; display: flex; align-items: center; gap: 6px; }

.acciones-look { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.like-btn { display: inline-flex; align-items: center; gap: 7px; }
.like-btn[aria-pressed=true] { color: var(--rosa); border-color: rgba(217,138,154,.45); }
.like-btn svg { width: 17px; height: 17px; }

/* --- Comentarios -------------------------------------------------------- */

.comentarios { margin-top: 36px; }
.comentario { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--borde-sutil); }
.comentario__cuerpo { flex: 1; min-width: 0; }
.comentario__meta { font-size: .8rem; color: var(--tenue); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.comentario p { margin: 5px 0 0; overflow-wrap: anywhere; }

.form-comentario { display: flex; gap: 12px; margin-bottom: 8px; }
.form-comentario textarea { min-height: 62px; }

/* --- Mensajeria --------------------------------------------------------- */

.buzon { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.buzon__lista { background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio); overflow: hidden; }
.buzon__item { display: flex; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--borde-sutil); }
.buzon__item:hover { background: var(--panel-alto); }
.buzon__item.on { background: var(--panel-alto); border-left: 2px solid var(--champan); }
.buzon__item div { min-width: 0; flex: 1; }
.buzon__item strong { display: block; font-size: .93rem; font-weight: 600; }
.buzon__item p { margin: 2px 0 0; font-size: .82rem; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hilo { background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 420px; }
.hilo__cabeza { padding: 14px 18px; border-bottom: 1px solid var(--borde-sutil); display: flex; align-items: center; gap: 12px; }
.hilo__cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow-y: auto; max-height: 56vh; }
.burbuja { max-width: 74%; padding: 10px 14px; border-radius: 16px; background: var(--panel-alto); font-size: .94rem; overflow-wrap: anywhere; }
.burbuja--mia { align-self: flex-end; background: linear-gradient(135deg, rgba(216,178,106,.22), rgba(216,178,106,.12)); border: 1px solid rgba(216,178,106,.3); }
.burbuja time { display: block; font-size: .72rem; color: var(--tenue); margin-top: 5px; }
.hilo__pie { padding: 14px 18px; border-top: 1px solid var(--borde-sutil); display: flex; gap: 10px; }

/* --- Panel -------------------------------------------------------------- */

.panel { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 28px; align-items: start; }
.panel__nav { background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio); padding: 10px; position: sticky; top: 86px; }
.panel__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radio-s); font-size: .92rem; color: var(--suave); }
.panel__nav a:hover { background: var(--panel-alto); color: var(--marfil); }
.panel__nav a.activo { background: rgba(216,178,106,.13); color: var(--champan-alto); }
.panel__nav hr { border: 0; border-top: 1px solid var(--borde-sutil); margin: 8px 4px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.tile { background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio); padding: 17px; }
.tile__t { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tenue); }
.tile__n { font-family: var(--serif); font-size: 1.85rem; margin-top: 7px; line-height: 1; }
.tile__p { font-size: .8rem; color: var(--tenue); margin-top: 6px; }

/* --- Tablas ------------------------------------------------------------- */

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--borde-sutil); border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 560px; }
.tabla th {
  text-align: left; padding: 12px 14px; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600;
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde-sutil); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: rgba(255,255,255,.015); }
.tabla .der { text-align: right; }
/* Columna prescindible: se cae en el telefono en vez de apretar la tabla. */
.tabla .col-extra { display: table-cell; }

/* --- Formularios de pagina ---------------------------------------------- */

.formulario { max-width: 760px; }
.formulario .fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 16px; }
.formulario .campo { min-width: 0; }
.formulario .pista { font-size: .82rem; color: var(--tenue); margin-top: 5px; }
.formulario fieldset { border: 1px solid var(--borde-sutil); border-radius: var(--radio); padding: 18px; margin: 0 0 22px; }
.formulario legend { padding: 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champan); }

.caja-estrecha { max-width: 420px; margin: 56px auto; }

/* --- Avisos ------------------------------------------------------------- */

.flashes { position: fixed; top: 78px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.flash {
  padding: 13px 16px; border-radius: var(--radio-s); font-size: .92rem;
  background: var(--panel-alto); border: 1px solid var(--borde); box-shadow: var(--sombra);
  animation: entra .25s ease;
}
.flash--ok    { border-color: rgba(116,196,155,.45); color: #c9f0da; }
.flash--error { border-color: rgba(226,112,110,.45); color: #fbd4d3; }
.flash--aviso { border-color: rgba(216,178,106,.45); color: #f4e2bd; }
@keyframes entra { from { opacity: 0; transform: translateX(14px); } }

.nota {
  padding: 14px 16px; border-radius: var(--radio-s); background: var(--panel);
  border: 1px solid var(--borde-sutil); border-left: 3px solid var(--champan);
  font-size: .93rem; color: var(--suave); margin-bottom: 22px;
}

.vacio { text-align: center; padding: 64px 20px; color: var(--tenue); }
.vacio h3 { color: var(--marfil); }

/* --- Paginacion --------------------------------------------------------- */

.paginas { display: flex; gap: 7px; justify-content: center; margin: 36px 0 8px; flex-wrap: wrap; }
.paginas a, .paginas span {
  min-width: 40px; padding: 9px 12px; text-align: center; border-radius: var(--radio-s);
  border: 1px solid var(--borde); font-size: .9rem; color: var(--suave);
}
.paginas a:hover { border-color: var(--champan); color: var(--champan-alto); }
.paginas .on { background: rgba(216,178,106,.14); border-color: var(--champan); color: var(--champan-alto); }
.paginas .nada { opacity: .35; }

/* --- Pie ---------------------------------------------------------------- */

.pie {
  position: relative;
  margin-top: 72px;
  padding: 50px 0 26px;
  border-top: 1px solid var(--borde-sutil);
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.36));
}
/* Hilo dorado que se apaga hacia los lados: separa el pie sin una linea dura. */
.pie::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,178,106,.5), transparent);
}

.pie__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr);
  gap: 44px;
}
.pie__marca .marca { font-size: 1.3rem; }
.pie__marca p {
  margin: 14px 0 18px; max-width: 42ch;
  color: var(--suave); font-size: .92rem;
}

.pie__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pie h4 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--champan);
  margin-bottom: 14px;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie ul a { color: var(--suave); font-size: .91rem; }
.pie ul a:hover { color: var(--champan-alto); }

.pie__legal {
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--borde-sutil);
  display: flex; justify-content: space-between; gap: 8px 22px; flex-wrap: wrap;
  align-items: baseline;
  font-size: .8rem; color: var(--tenue);
}
.pie__aviso i { font-style: normal; opacity: .5; margin: 0 4px; }

/* --- Galeria de subida -------------------------------------------------- */

.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.foto-item { position: relative; border-radius: var(--radio-s); overflow: hidden; border: 1px solid var(--borde-sutil); }
.foto-item img { aspect-ratio: 3/4; object-fit: cover; }
.foto-item form { position: absolute; top: 6px; right: 6px; }
.foto-item button {
  width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10,9,12,.8); color: var(--rojo); font-size: 15px; line-height: 1;
}
.soltar {
  border: 1.5px dashed var(--borde); border-radius: var(--radio);
  padding: 30px 20px; text-align: center; color: var(--tenue); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.soltar:hover, .soltar.sobre { border-color: var(--champan); background: rgba(216,178,106,.05); color: var(--suave); }
.soltar input { display: none; }
.soltar b { color: var(--champan-alto); }

/* --- Utilidades --------------------------------------------------------- */

.fila-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.centro { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 22px; } .mt-3 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 22px; }
.oculto-movil { display: initial; }
.solo-movil   { display: none; }
.prosa { max-width: 70ch; }
.prosa h2 { margin-top: 1.6em; }
.prosa ul { padding-left: 1.2em; color: var(--suave); }
.prosa li { margin-bottom: .5em; }

/* --- Portada: cartel con foto y barra de entrada -------------------------- */

.cartel {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: 330px;
  background: linear-gradient(140deg, #272433, #16151b);
}
.cartel__fondo { position: absolute; inset: 0; }
.cartel__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Dos capas encima de la foto: una que oscurece para que el texto se lea
   siempre, pase la foto que pase, y un halo dorado que la ata a la paleta. */
.cartel__fondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 80% at 50% 42%, rgba(216,178,106,.18), transparent 72%),
    linear-gradient(rgba(14,13,16,.38), rgba(14,13,16,.64) 55%, rgba(14,13,16,.82));
}
.cartel__contenido { position: relative; z-index: 1; padding: 56px 20px; }
.cartel__titulo {
  margin: 0 0 10px;
  text-shadow: 0 2px 22px rgba(8,7,10,.6);
  font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: .01em;
}
.cartel__lema {
  margin: 0 auto; max-width: 38ch; font-size: 1.02rem;
  color: rgba(244,240,234,.86);
  text-shadow: 0 1px 14px rgba(8,7,10,.7);
}
.cartel__credito {
  position: absolute; right: 14px; bottom: 10px; z-index: 2;
  font-size: .72rem; color: var(--tenue); letter-spacing: .02em;
}
.cartel__credito:hover { color: var(--champan-alto); }

.intro { padding: 18px 0 4px; border-bottom: 1px solid var(--borde-sutil); }
.intro__barra { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.intro__buscar { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; margin: 0 auto; }
.intro__buscar input[type=search] {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  background: var(--panel); color: var(--marfil);
  border: 1px solid var(--borde); border-radius: 999px;
  font: inherit; font-size: .94rem;
}
.intro__buscar input[type=search]:focus { outline: none; border-color: var(--champan); }
.intro__ciudades { margin-top: 16px; padding-bottom: 16px; }

/* --- Pagina de cuentas en preparacion ------------------------------------- */

.lista-pronto {
  list-style: none;
  margin: 20px auto 0; padding: 0;
  max-width: 34ch;
  text-align: left; color: var(--suave); font-size: .94rem;
}
.lista-pronto li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--borde-sutil); }
.lista-pronto li::before { content: "\2014"; position: absolute; left: 0; color: var(--champan); }

/* --- Para modelos --------------------------------------------------------- */

.pm-cabeza { max-width: 62ch; padding-top: 14px; }
.pm-bajada { font-size: 1.05rem; margin-bottom: 22px; }

.pm-numeros {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 36px;
  background: var(--borde-sutil);
  border: 1px solid var(--borde-sutil); border-radius: var(--radio);
  overflow: hidden;
}
.pm-numeros > div { background: var(--panel); padding: 18px 20px; }
.pm-numeros strong {
  display: block;
  font-family: var(--serif); font-size: 1.75rem; color: var(--champan-alto);
}
.pm-numeros span { display: block; margin-top: 4px; color: var(--suave); font-size: .86rem; }

.pm-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.pm-pasos li {
  counter-increment: paso;
  position: relative;
  padding: 18px 0 18px 54px;
  border-bottom: 1px solid var(--borde-sutil);
}
.pm-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 16px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(216,178,106,.4); border-radius: 50%;
  font-family: var(--serif); color: var(--champan-alto);
}
.pm-pasos h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pm-pasos p  { margin: 0; color: var(--suave); font-size: .94rem; }

.pm-lista { margin: 0; padding-left: 1.1em; color: var(--suave); font-size: .92rem; }
.pm-lista li { margin-bottom: 6px; }

.pm-faq details { border-bottom: 1px solid var(--borde-sutil); padding: 14px 0; }
.pm-faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.02rem; }
.pm-faq summary::marker { color: var(--champan); }
.pm-faq p { margin: 10px 0 0; color: var(--suave); font-size: .93rem; max-width: 70ch; }

/* --- Creditos de fotos ---------------------------------------------------- */

.creditos { list-style: none; margin: 0; padding: 0; }
.creditos li {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--borde-sutil);
  font-size: .92rem;
}
.creditos li span, .creditos li a.silencio { font-size: .84rem; }

/* --- Fotos de la modelo: tira deslizable y galeria ------------------------ */

.modos { display: flex; gap: 0; border: 1px solid var(--borde); border-radius: 999px; padding: 2px; }
.modos__b {
  padding: 7px 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--suave); font: inherit; font-size: .85rem;
}
.modos__b.on { background: rgba(216,178,106,.16); color: var(--champan-alto); }

.tira-fotos { position: relative; }
.tira-fotos__pista {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.tira-fotos__pista::-webkit-scrollbar { display: none; }
.tira-fotos__pista:focus-visible { outline: 2px solid var(--champan); outline-offset: 4px; border-radius: var(--radio); }

.tira-fotos__item {
  flex: none; margin: 0;
  width: min(58vw, 420px);
  scroll-snap-align: center;
}
.tira-fotos__item a { position: relative; display: block; border-radius: var(--radio); overflow: hidden; background: var(--panel); }
.tira-fotos__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.tira-fotos__item figcaption {
  margin-top: 8px; font-size: .84rem; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Las flechas son ayuda de raton: con el dedo se arrastra la tira. */
.tira-fotos__flecha {
  position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--borde); background: rgba(14,13,16,.82); color: var(--marfil);
  font-size: 22px; line-height: 1; backdrop-filter: blur(6px);
}
.tira-fotos__flecha:hover { border-color: var(--champan); color: var(--champan-alto); }
.tira-fotos__flecha--izq { left: -8px; }
.tira-fotos__flecha--der { right: -8px; }

.galeria-fotos {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
.galeria-fotos__item { position: relative; display: block; border-radius: var(--radio-s); overflow: hidden; background: var(--panel); }
.galeria-fotos__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.galeria-fotos__candado {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--champan); background: rgba(12,11,15,.3);
}
.galeria-fotos__candado svg { width: 22px; height: 22px; }

/* --- Mosaico de fotos ------------------------------------------------------ */

/* Rejilla pareja: todas las piezas del mismo ancho y la misma proporcion, y el
   pie de una sola linea. Es lo que distingue un mosaico ordenado de una lista
   de tarjetas con textos de largo desigual. */
.mosaico {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.mosaico__item { display: block; }
.mosaico__foto {
  position: relative; display: block;
  border-radius: var(--radio); overflow: hidden; background: var(--panel);
  border: 1px solid var(--borde-sutil);
}
.mosaico__foto img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform .45s ease;
}
@media (hover: hover) {
  .mosaico__item:hover .mosaico__foto img { transform: scale(1.04); }
  .mosaico__item:hover .mosaico__pie { color: var(--champan-alto); }
}
.mosaico__candado {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--champan); background: rgba(12,11,15,.28);
}
.mosaico__candado svg { width: 24px; height: 24px; }
.mosaico__pie {
  display: block; margin-top: 8px; text-align: center;
  font-size: .85rem; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Adaptacion a pantallas pequenas ------------------------------------ */

@media (max-width: 1040px) {
  .look { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .panel { grid-template-columns: 1fr; }
  .panel__nav { position: static; display: flex; gap: 4px; overflow-x: auto;
               -webkit-overflow-scrolling: touch; }
  /* Barra que se arrastra de lado: los enlaces no se parten ni se encogen. */
  .panel__nav a { flex: none; white-space: nowrap; }
  .panel__nav hr { display: none; }
  .buzon { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  /* --- Cabecera: marca a la izquierda, acciones y menu a la derecha ------ */
  .cabecera__fila { height: 60px; gap: 10px; }
  .marca { font-size: 1.2rem; gap: 7px; }
  .marca__logo { width: 16px; height: 21px; }
  /* El buscador del encabezado no cabe: en el menu hay un enlace a /buscar. */
  .cabecera__buscar { display: none; }
  .cabecera__acciones { order: 2; margin-left: auto; }
  .menu-boton { display: block; order: 3; }
  .solo-movil { display: block; }

  .nav { display: none; }
  .nav.abierta {
    display: flex; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--tinta-2); border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
  }
  /* Objetivos de toque comodos: 44px es el minimo que se acierta con el dedo. */
  .nav.abierta a { padding: 13px 14px; font-size: 1rem; }

  /* --- Formularios: menos de 16px hace que iOS acerque la pagina sola ---- */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=search], input[type=url], select, textarea { font-size: 16px; }

  /* --- Estructura general ----------------------------------------------- */
  .envoltura { padding: 0 16px; }
  .seccion { padding: 30px 0; }
  .seccion--ap { padding: 14px 0 30px; }
  .seccion__cabeza { margin-bottom: 16px; }
  .vacio { padding: 40px 16px; }
  .caja-estrecha { margin: 26px auto; }
  .caja { padding: 16px; }
  .btn--s { padding: 9px 15px; font-size: .87rem; }
  .chip { padding: 9px 15px; }

  /* --- Portada ----------------------------------------------------------- */
  .cartel { min-height: 250px; }
  .cartel__contenido { padding: 36px 16px; }
  .cartel__lema { font-size: .93rem; max-width: 28ch; }
  .intro { padding-top: 14px; }
  .intro__barra { gap: 12px; }
  .intro__buscar { flex-basis: 100%; max-width: none; }
  .intro__ciudades { margin-top: 14px; padding-bottom: 14px; }
  /* En el telefono la fila siempre se sale: el degradado avisa de que sigue. */
  .tira::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0;
    width: 40px; pointer-events: none;
    background: linear-gradient(90deg, rgba(14,13,16,0), var(--tinta) 85%);
  }

  /* --- Listados ---------------------------------------------------------- */
  .grilla--modelos, .grilla--looks { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  /* La grilla centrada es flex: sin bajar la base se queda en una columna. */
  .mosaico { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 10px; }
  .mosaico__pie { font-size: .78rem; margin-top: 6px; }
  .centrada .grilla { gap: 12px; }
  .centrada .grilla > * { flex: 1 1 132px; max-width: none; }
  .tarjeta__cuerpo { padding: 11px 12px 12px; gap: 5px; }
  .tarjeta__nombre { font-size: .98rem; }
  .tarjeta__meta, .tarjeta__pie { font-size: .78rem; }

  /* La tarjeta de look mide 132x176: todo lo que va encima se aprieta. */
  .look-tarjeta__velo { padding: 11px 10px; }
  .look-tarjeta__titulo { font-size: .88rem; }
  .look-tarjeta__autora { font-size: .74rem; }
  .look-tarjeta__stats { top: 7px; right: 7px; font-size: .7rem; }
  .pastilla { padding: 2px 7px; }
  /* En el telefono la tira ensena una foto entera y el borde de la siguiente,
     que es lo que invita a arrastrar. Las flechas sobran: esta el dedo. */
  .tira-fotos__item { width: 78vw; }
  .tira-fotos__flecha { display: none; }
  .galeria-fotos { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); gap: 6px; }
  .modos__b { padding: 8px 13px; font-size: .82rem; }

  .bloqueado { padding: 30px 6px 78px; }
  .bloqueado__caja { padding: 8px; gap: 4px; max-width: 98%; }
  .bloqueado__icono svg { width: 18px; height: 18px; }
  /* Una linea; si el precio fuera larguisimo, se recorta antes de desbordar. */
  .bloqueado__texto {
    font-size: .7rem; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }

  /* --- Perfil y look ----------------------------------------------------- */
  .perfil__cabeza { margin-top: -40px; gap: 14px; }
  .perfil__avatar { width: 92px; height: 92px; }
  .perfil__cifras { gap: 18px; margin-top: 18px; }
  .portada { height: 170px; }
  .visor__principal img { max-height: 64vh; }

  /* --- Comentarios ------------------------------------------------------- */
  .form-comentario { flex-direction: column; }
  .form-comentario .avatar { display: none; }

  /* --- Para modelos ------------------------------------------------------ */
  .pm-numeros { grid-template-columns: 1fr 1fr; }
  .pm-numeros strong { font-size: 1.35rem; }
  .pm-numeros > div { padding: 14px 15px; }
  .pm-pasos li { padding-left: 46px; }

  /* --- Resto ------------------------------------------------------------- */
  .flashes { left: 12px; right: 12px; top: 70px; max-width: none; }
  .pie { margin-top: 44px; padding: 34px 0 22px; }
  .pie__grid { grid-template-columns: 1fr; gap: 26px; }
  .pie__marca p { margin: 12px 0 16px; }
  /* Apiladas una tras otra, las tres listas hacen el pie larguisimo. */
  .pie__cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .pie__legal { gap: 10px; }
  .oculto-movil { display: none; }
  .tabla .col-extra { display: none; }
}

@media (max-width: 400px) {
  /* Dos cifras por fila se parten en palabras sueltas: mejor una. */
  .pm-numeros { grid-template-columns: 1fr; }
}