/* ============================================================
   Tentación · hoja de estilos
   Paleta de marca: vino #4A0D1E · oro #D9B26F · rosa #E8A0B4 · crema #F7EDE6
   El fondo de la página es crema; los cuadros van en vino con detalles en oro.
   ============================================================ */
:root{
  color-scheme:dark;

  /* fondo de la página: crema */
  --crema:#F7EDE6;
  --fondo:#FBF5F0;
  --fondo-crema-2:#F4E8DF;

  /* los cuadros: vino */
  --vino:#4A0D1E;
  --hondo:#380A16;            /* un punto más profundo que el vino de marca */
  --fondo-2:#45101F;
  --tarjeta:#4E1223;
  --tarjeta-2:#5A1729;
  --elevado:#63182C;

  /* oro */
  --oro:#D9B26F;
  --oro-claro:#F0D89A;
  --oro-oscuro:#A8763C;
  --oro-metal:linear-gradient(135deg,#A8763C 0%,#F0D89A 32%,#D9B26F 52%,#B98C4C 78%,#EBD096 100%);
  --linea-oro:linear-gradient(90deg,transparent,rgba(217,178,111,.55),rgba(240,216,154,.9),rgba(217,178,111,.55),transparent);

  /* rosa */
  --rosa:#E8A0B4;
  --rosa-2:#D4728C;
  --rosa-3:#C25C79;

  /* texto dentro de los cuadros (sobre vino) */
  --texto:#F7EDE6;
  --suave:#D8BDBF;
  --tenue:#A98489;

  /* texto sobre el fondo crema */
  --texto-fondo:#3A0A17;
  --suave-fondo:#7C5A63;
  --tenue-fondo:#A08790;
  --borde-fondo:rgba(74,13,30,.12);

  /* bordes */
  --borde:rgba(217,178,111,.20);
  --borde-2:rgba(217,178,111,.38);
  --borde-suave:rgba(247,237,230,.10);

  /* estados */
  --ok:#7FD1A6;
  --alerta:#E8C36F;
  --error:#F08C99;

  --radio:18px;
  --radio-chico:12px;
  --display:'Playfair Display','Georgia',serif;
  --cuerpo:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;

  /* profundidad: sombra pegada + sombra difusa + luz interior */
  --sombra-suave:0 1px 2px rgba(74,13,30,.18), 0 6px 18px rgba(74,13,30,.16);
  --sombra:0 2px 4px rgba(74,13,30,.20), 0 16px 36px rgba(74,13,30,.22);
  --sombra-alta:0 3px 6px rgba(74,13,30,.22), 0 28px 64px rgba(74,13,30,.30);
  --brillo:inset 0 1px 0 rgba(255,255,255,.14);
  --brillo-oro:inset 0 1px 0 rgba(240,216,154,.35);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fondo);-webkit-text-size-adjust:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;
  color:var(--texto-fondo);
  font-family:var(--cuerpo);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body > main{flex:1 0 auto;width:100%}
body > .cabecera,body > footer.pie{flex:none;width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit;font-size:15px;color:var(--texto)}
h1,h2,h3,.titulo,.metrica b,.hero h1,.estadisticas b{font-family:var(--display);font-weight:700}
:focus-visible{outline:2px solid var(--oro-oscuro);outline-offset:2px}
::selection{background:rgba(232,160,180,.40);color:var(--vino)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fondo-crema-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--oro),var(--oro-oscuro));border-radius:999px;border:3px solid var(--fondo-crema-2)}

/* ---------- estructura ---------- */
.contenedor{max-width:1180px;margin:0 auto;padding:0 18px}
.fila{display:flex;gap:18px;flex-wrap:wrap}
.columnas{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.columnas > *{min-width:0}
@media(max-width:900px){.columnas{grid-template-columns:1fr}}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;box-shadow:0 6px 24px rgba(74,13,30,.18);
  background:linear-gradient(180deg, rgba(74,13,30,.97), rgba(58,10,23,.94));
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--borde);
}
.cabecera::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--linea-oro)}
.cabecera .interior{display:flex;align-items:center;gap:14px;height:72px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:40px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.logo .nombre{display:none}
.menu{display:flex;gap:5px;align-items:center}
.menu.enlaces{margin-left:auto}
.menu.cuenta-acciones{margin-left:0;gap:8px;flex:none}
.menu a{padding:9px 13px;border-radius:11px;color:var(--suave);font-weight:600;font-size:14px;transition:color .15s,background .15s}
.menu a:hover{background:rgba(247,237,230,.06);color:var(--texto)}
.menu a.activo{color:var(--oro-claro);background:rgba(217,178,111,.10);box-shadow:inset 0 0 0 1px var(--borde)}
.menu a.boton{color:#3A0A17}
.menu a.boton.linea{color:var(--vino)}
.buscador{flex:1;max-width:300px}
.buscador input{
  width:100%;padding:11px 15px;border-radius:12px;
  border:1px solid var(--borde);background:rgba(0,0,0,.22);color:var(--texto);outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.30);
}
.buscador input::placeholder{color:var(--tenue)}
.buscador input:focus{border-color:var(--borde-2);background:rgba(0,0,0,.32)}
.avatar-mini{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid transparent;
  background:var(--oro-metal);padding:2px;box-shadow:var(--sombra-suave)}

@media(max-width:1080px){.buscador{display:none}}
@media(max-width:1024px){
  .cabecera .interior{height:auto;flex-wrap:wrap;padding-block:11px;gap:9px}
  .logo{order:1;margin-right:auto}
  .moneda{order:2}
  .menu.cuenta-acciones{order:3}
  .menu.enlaces{order:4;flex-basis:100%;margin-left:0;justify-content:flex-start;
    overflow-x:auto;padding-top:4px;scrollbar-width:none}
  .menu.enlaces::-webkit-scrollbar{display:none}
  .menu.enlaces a{white-space:nowrap}
}
@media(max-width:560px){
  .cabecera .interior{gap:7px}
  .menu a{padding:8px 9px;font-size:13px}
  .logo img{height:34px}
  .moneda a{padding:6px 11px;font-size:11.5px}
  .menu .boton.chico{padding:9px 13px;font-size:12.5px}
}

/* ---------- interruptor de moneda ---------- */
.moneda{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--borde);border-radius:999px;padding:3px;gap:2px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.moneda a{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--tenue);white-space:nowrap}
.moneda a:hover{color:var(--texto)}
.moneda a.activo{background:var(--oro-metal);color:#3A0A17;box-shadow:var(--brillo-oro),0 2px 8px rgba(0,0,0,.4)}

/* ---------- botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:13px;border:0;cursor:pointer;
  font-family:var(--cuerpo);font-weight:800;font-size:14px;line-height:1.1;
  letter-spacing:-.1px;white-space:nowrap;text-align:center;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-2) 60%,var(--rosa-3));
  color:#3A0A17;
  box-shadow:var(--brillo), 0 2px 4px rgba(0,0,0,.35), 0 10px 22px rgba(196,74,108,.28);
  transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,filter .16s ease;
}
.boton:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:var(--brillo), 0 4px 8px rgba(0,0,0,.4), 0 16px 34px rgba(196,74,108,.38)}
.boton:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.boton.linea{background:#FFFCF8;border:1px solid var(--borde-2);color:var(--vino);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px rgba(74,13,30,.18)}
.boton.linea:hover{border-color:var(--oro-oscuro);color:#8A5F26;background:#FFF8EC}
/* el dorado se reserva para lo premium: planes, destacar, suscribirse */
.boton.oro,.boton.violeta{background:var(--oro-metal);color:#3A0A17;
  box-shadow:var(--brillo-oro),0 2px 4px rgba(0,0,0,.35),0 12px 26px rgba(168,118,60,.35)}
.boton.oro:hover,.boton.violeta:hover{filter:brightness(1.05) saturate(1.05)}
.boton.verde{background:linear-gradient(135deg,#4FB98A,#2F9E77);color:#04251A}
.boton.rojo{background:linear-gradient(135deg,#E0788A,#C4485C);color:#2E0710}
.boton.chico{padding:8px 14px;font-size:12.5px;border-radius:10px}
.boton.ancho{width:100%}
.boton:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- tarjetas ---------- */
.tarjeta{
  position:relative;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 55%,var(--vino));
  border:1px solid var(--borde);border-radius:var(--radio);padding:20px;
  box-shadow:var(--sombra),var(--brillo);
}
.tarjeta::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--linea-oro);opacity:.75}
.tarjeta + .tarjeta{margin-top:18px}
.titulo{font-size:23px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px;color:var(--vino)}
.subtitulo{color:var(--suave-fondo);font-size:14px;margin-bottom:18px}
/* dentro de un cuadro vino vuelven al color claro */
.tarjeta .titulo,.hero .titulo,.plan .titulo,.publicacion .titulo,.lateral .titulo,
.chat .titulo,.seguida .titulo,.metrica .titulo,.franja-creadoras .titulo,.edad-caja .titulo,
.creador-tarjeta .titulo,.contador-chat .titulo{color:var(--texto)}
.tarjeta .subtitulo,.hero .subtitulo,.plan .subtitulo,.publicacion .subtitulo,.lateral .subtitulo,
.chat .subtitulo,.seguida .subtitulo,.franja-creadoras .subtitulo,.edad-caja .subtitulo,
.creador-tarjeta .subtitulo,.contador-chat .subtitulo{color:var(--suave)}
/* el texto suelto que queda sobre el crema */
.vacio{color:var(--suave-fondo)}
.tarjeta .vacio,.publicacion .vacio,.chat .vacio{color:var(--suave)}

/* ---------- formularios ---------- */
.campo{margin-bottom:15px}
.campo label{display:block;font-size:12.5px;font-weight:800;margin-bottom:7px;color:var(--oro);
  letter-spacing:.4px;text-transform:uppercase}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=number],.campo input[type=date],.campo select,.campo textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--borde);
  background:rgba(0,0,0,.24);color:var(--texto);outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.30);
}
.campo textarea{min-height:110px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--oro);box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 0 3px rgba(217,178,111,.18)}
.campo select option{background:var(--vino);color:var(--texto)}
.campo .ayuda,.ayuda{font-size:12.5px;color:var(--suave);margin-top:6px}
.campo input[type=file]{
  width:100%;padding:11px;border:1px dashed var(--borde-2);border-radius:12px;
  background:rgba(0,0,0,.18);color:var(--suave);
}
.formulario-centrado{max-width:430px;margin:48px auto}

/* ---------- avisos ---------- */
.aviso{padding:13px 16px;border-radius:13px;margin-bottom:18px;font-size:14px;font-weight:600;
  border:1px solid;box-shadow:var(--sombra-suave);backdrop-filter:blur(2px)}
.aviso.ok{background:linear-gradient(160deg,#2C5A45,#24503C);border-color:rgba(127,209,166,.45);color:#CFF3E2}
.aviso.error{background:linear-gradient(160deg,#6B1D2C,#5A1725);border-color:rgba(240,140,153,.45);color:#FFD5DB}
.aviso.info{background:linear-gradient(160deg,var(--tarjeta-2),var(--vino));border-color:var(--borde-2);color:var(--oro-claro)}
.aviso.alerta{background:linear-gradient(160deg,#5E3F16,#4A3110);border-color:rgba(232,195,111,.45);color:#F7E4B8}

/* ---------- portada ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--texto);
  border-radius:26px;padding:60px 40px;margin:26px 0;text-align:center;
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(232,160,180,.20), transparent 60%),
    radial-gradient(760px 340px at 85% 100%, rgba(217,178,111,.18), transparent 62%),
    linear-gradient(160deg,var(--tarjeta-2),var(--vino) 60%,#3A0A17);
  border:1px solid var(--borde-2);
  box-shadow:var(--sombra-alta),var(--brillo);
}
.hero::before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;background:var(--linea-oro)}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-.5px;margin-bottom:16px;text-wrap:balance;max-width:17ch;margin-inline:auto}
.hero h1 span{
  background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(168,118,60,.35));
}
.hero p{color:var(--suave);max-width:560px;margin:0 auto 26px;font-size:16px}
.hero .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){.hero{padding:42px 22px}.hero h1{font-size:31px}}

/* ---------- rejilla de creadoras: relieve y 3D suave ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px;align-items:stretch;
  perspective:1200px}
.creador-tarjeta{
  position:relative;height:100%;overflow:hidden;border-radius:var(--radio);color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino));
  border:1px solid var(--borde);
  box-shadow:var(--sombra-suave),var(--brillo);
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.creador-tarjeta > a{display:flex;flex-direction:column;height:100%}
.creador-tarjeta:hover{border-color:var(--borde-2)}
.creador-tarjeta .tapa{height:108px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#6B1B31,#4A0D1E 60%,#7A2440)}
.creador-tarjeta .tapa::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(56,10,22,.85) 100%)}
.creador-tarjeta .tapa img{width:100%;height:100%;object-fit:cover;opacity:.92;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.creador-tarjeta:hover .tapa img{transform:scale(1.07)}
.creador-tarjeta .aro{
  position:relative;z-index:3;display:block;flex:none;width:76px;height:76px;margin:-40px 0 0 16px;
  border-radius:50%;padding:2.5px;
  background:conic-gradient(from var(--ang),#7A5320,#F0D89A 18%,#D9B26F 32%,#8A5F26 52%,#FFF1C9 68%,#B98C4C 84%,#7A5320);
  box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 0 4px rgba(56,10,22,.92);
}
.creador-tarjeta .aro .foto{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:var(--vino);border:2px solid var(--vino)}
.creador-tarjeta .tapa .sello{
  position:absolute;top:10px;right:10px;z-index:3;
  background:var(--oro-metal);color:#3A0A17;border-radius:999px;padding:4px 11px;
  font-size:11px;font-weight:800;letter-spacing:.2px;
  box-shadow:var(--brillo-oro),0 4px 14px rgba(0,0,0,.45);
}
.creador-tarjeta .datos{padding:12px 16px 16px;display:flex;flex-direction:column;flex:1;gap:2px}
.creador-tarjeta .nom{font-weight:700;display:flex;align-items:center;gap:6px;font-family:var(--display);
  font-size:17px;letter-spacing:-.2px;line-height:1.25}
.creador-tarjeta .arroba{color:var(--tenue);font-size:12.5px;font-weight:600}
.creador-tarjeta .bio{color:var(--suave);font-size:13px;line-height:1.5;margin:10px 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.creador-tarjeta .pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding:11px 11px 11px 15px;border-radius:14px;flex-wrap:nowrap;
  background:linear-gradient(160deg,rgba(0,0,0,.30),rgba(0,0,0,.14));
  border:1px solid rgba(217,178,111,.18);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.07),inset 0 -10px 18px rgba(0,0,0,.14)}
.creador-tarjeta .pie .boton.chico{flex:none;border-radius:10px;padding:9px 15px}
@media(max-width:340px){.creador-tarjeta .pie{flex-wrap:wrap}}

/* ubicación */
.ubicacion{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;min-height:20px}
.pais{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--texto)}
.bandera{display:block;border-radius:3.5px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.ciudad-nombre{font-size:12px;font-weight:700;color:var(--suave);position:relative;padding-left:9px}
.ciudad-nombre::before{content:'';position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--oro);transform:translateY(-50%)}
.marca-modalidad{display:inline-block;margin-top:2px;align-self:flex-start;
  background:rgba(217,178,111,.12);border:1px solid var(--borde);color:var(--oro-claro);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.2px}

/* precio en oro */
.precio{font-weight:800;display:flex;flex-direction:column;line-height:1.15;min-width:0;
  font-variant-numeric:tabular-nums}
.precio b{font-size:16px;letter-spacing:-.2px;white-space:nowrap;font-family:var(--display);
  background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.precio small{font-size:10.5px;font-weight:800;color:var(--tenue);letter-spacing:.4px;text-transform:uppercase}

.insignia{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--oro-metal);color:#3A0A17;font-size:10px;font-weight:900;
  box-shadow:var(--brillo-oro),0 2px 6px rgba(0,0,0,.4)}
.sello-perfil{display:inline-flex;align-items:center;gap:6px;background:var(--oro-metal);
  color:#3A0A17;border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:800;
  box-shadow:var(--brillo-oro),0 3px 10px rgba(0,0,0,.4)}

/* ---------- perfil ---------- */
/* la portada y la ficha de arriba forman un solo bloque vino */
.perfil-portada{height:200px;border-radius:22px 22px 0 0;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#6B1B31,#4A0D1E 55%,#7A2440);
  border:1px solid var(--borde);border-bottom:0;box-shadow:var(--sombra)}
.perfil-portada::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(56,10,22,.92) 100%)}
.perfil-portada img{width:100%;height:100%;object-fit:cover;opacity:.9}
.perfil-cabeza{position:relative;z-index:2;display:flex;gap:18px;align-items:flex-end;
  padding:0 22px 20px;flex-wrap:wrap;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino));
  border:1px solid var(--borde);border-top:0;border-radius:0 0 22px 22px;
  box-shadow:var(--sombra)}
.perfil-foto{width:116px;height:116px;border-radius:50%;object-fit:cover;padding:3px;margin-top:-58px;
  background-color:var(--vino);background-image:var(--oro-metal);box-shadow:0 14px 34px rgba(74,13,30,.45)}
.perfil-datos{flex:1;min-width:220px;padding-bottom:2px}
.perfil-datos h1{font-size:27px;display:flex;align-items:center;gap:9px;font-family:var(--display)}
.perfil-datos .arroba{color:var(--tenue);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.perfil-datos .ubicacion{margin-top:8px}
.acciones-perfil{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:2px}

.estadisticas{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;overflow:hidden;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta));
  border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra-suave),var(--brillo)}
.estadisticas div{flex:1 1 140px;padding:16px 18px;font-size:11.5px;color:var(--tenue);
  font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-left:1px solid var(--borde-suave)}
.estadisticas div:first-child{border-left:0}
.estadisticas b{display:block;font-size:21px;color:var(--texto);font-family:var(--display);
  letter-spacing:-.3px;margin-bottom:3px;text-transform:none;font-variant-numeric:tabular-nums}

/* pestañas */
.pestanas{display:inline-flex;gap:5px;margin:24px 0 20px;padding:5px;
  background:linear-gradient(160deg,var(--tarjeta-2),var(--vino));border:1px solid var(--borde);border-radius:15px;
  box-shadow:var(--sombra-suave);max-width:100%;flex-wrap:wrap}
.pestanas a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:11px;
  font-size:13.5px;font-weight:800;color:var(--suave);transition:all .16s ease}
.pestanas a:hover{color:var(--texto)}
.pestanas a.activa{background:var(--oro-metal);color:#3A0A17;box-shadow:var(--brillo-oro),0 3px 10px rgba(0,0,0,.4)}
.pestanas a .cuenta{background:rgba(0,0,0,.20);color:inherit;border-radius:999px;padding:1px 8px;
  font-size:11px;font-variant-numeric:tabular-nums}

/* ---------- planes ---------- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,292px));gap:16px;margin:22px 0 4px;
  justify-content:start;perspective:1200px}
@media(max-width:520px){.planes{grid-template-columns:1fr}}
.plan{position:relative;overflow:hidden;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 55%,var(--vino));
  border:1px solid var(--borde);border-radius:var(--radio);padding:22px;
  box-shadow:var(--sombra-suave),var(--brillo);display:flex;flex-direction:column;gap:11px;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease,border-color .26s ease}
.plan::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--linea-oro)}
.plan:hover{transform:translateY(-5px) rotateX(2deg);box-shadow:var(--sombra-alta),var(--brillo-oro);
  border-color:var(--borde-2)}
.plan.mio{border-color:var(--oro);background:linear-gradient(160deg,#5F1A2E,var(--tarjeta) 60%,var(--vino))}
.plan .nombre{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.2px}
.plan .valor{font-size:25px;font-weight:800;letter-spacing:-.4px;font-family:var(--display);
  background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .valor span{font-size:12px;color:var(--suave);font-weight:700;margin-left:5px;
  -webkit-text-fill-color:var(--suave)}
.plan .incluye{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;flex:1}
.plan .incluye li{font-size:13px;color:var(--suave);padding-left:20px;position:relative}
.plan .incluye li::before{content:'✦';position:absolute;left:0;color:var(--oro);font-size:11px;top:2px}
.plan .boton{margin-top:4px}

/* ---------- publicaciones ---------- */
.publicacion{position:relative;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino));
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;margin-bottom:18px;
  box-shadow:var(--sombra-suave),var(--brillo);transition:box-shadow .2s ease,border-color .2s ease}
.publicacion:hover{box-shadow:var(--sombra);border-color:var(--borde-2)}
.publicacion .encabezado{display:flex;align-items:center;gap:12px;padding:15px 17px}
.publicacion .encabezado img{width:44px;height:44px;border-radius:50%;object-fit:cover;padding:2px;
  background-image:var(--oro-metal);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.publicacion .encabezado .quien{font-weight:700;font-size:14.5px}
.publicacion .encabezado .cuando{color:var(--tenue);font-size:12.5px}
.publicacion .encabezado .con-quien{font-size:12.5px;color:var(--oro);font-weight:700;margin-top:2px}
.publicacion .encabezado .con-quien a{color:inherit}
.publicacion .texto{padding:0 17px 14px;font-size:14.5px;white-space:pre-wrap;word-wrap:break-word;color:var(--texto)}
.galeria{display:grid;gap:3px}
.galeria.n1{grid-template-columns:1fr}
.galeria.n2,.galeria.n3,.galeria.n4{grid-template-columns:1fr 1fr}
.medio{position:relative;background:var(--fondo-2);overflow:hidden}
.medio img,.medio video{width:100%;height:100%;object-fit:cover;max-height:560px;display:block}
.galeria.n2 .medio img,.galeria.n3 .medio img,.galeria.n4 .medio img,
.galeria.n2 .medio video,.galeria.n3 .medio video,.galeria.n4 .medio video{height:230px}
.candado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:16px;color:var(--texto);
  background:linear-gradient(180deg,rgba(56,10,22,.55),rgba(56,10,22,.88));
  backdrop-filter:blur(2px)}
.candado .icono{font-size:26px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.candado .frase{font-weight:700;font-size:14px;max-width:260px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.candado .boton{margin-top:4px}
.etiqueta{position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(56,10,22,.82);border:1px solid var(--borde-2);color:var(--oro-claro);
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.2px;
  backdrop-filter:blur(6px);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.etiqueta.ppv{background:var(--oro-metal);border-color:transparent;color:#3A0A17}
.etiqueta.pelicula{background:rgba(232,160,180,.18);border-color:rgba(232,160,180,.45);color:#FFD2DC;margin-right:5px}
.medio .cinta{position:absolute;top:10px;left:10px;z-index:2;background:rgba(56,10,22,.82);
  border:1px solid var(--borde-2);color:var(--oro-claro);padding:5px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;backdrop-filter:blur(6px)}
.medio .cinta.libre{background:linear-gradient(135deg,#4FB98A,#2F9E77);border-color:transparent;color:#04251A}
.publicacion .acciones{display:flex;gap:16px;padding:13px 17px;border-top:1px solid var(--borde-suave);
  color:var(--suave);font-size:13.5px;align-items:center}
.publicacion .acciones form{display:inline}
.publicacion .acciones button{background:none;border:0;color:var(--suave);cursor:pointer;font-size:13.5px;
  font-weight:700;padding:0}
.publicacion .acciones button:hover,.publicacion .acciones button.activo{color:var(--rosa)}

/* ---------- lateral de paneles ---------- */
.lateral{color:var(--texto);background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta));
  border:1px solid var(--borde);border-radius:var(--radio);padding:12px;position:sticky;top:88px;
  box-shadow:var(--sombra-suave),var(--brillo)}
.lateral a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  color:var(--suave);font-weight:600;font-size:14px;transition:all .15s ease}
.lateral a:hover{background:rgba(247,237,230,.06);color:var(--texto)}
.lateral a.activo{background:rgba(217,178,111,.14);color:var(--oro-claro);
  box-shadow:inset 0 0 0 1px var(--borde-2)}
.lateral .separador{height:1px;background:var(--linea-oro);margin:9px 6px;opacity:.6}
.lateral .etiqueta-menu{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--oro);
  padding:10px 13px 6px;font-weight:800}
.lateral .n{margin-left:auto;background:var(--oro-metal);color:#3A0A17;border-radius:999px;
  padding:1px 8px;font-size:11px;font-weight:800}
@media(max-width:900px){.lateral{position:static;display:flex;gap:6px;overflow-x:auto}
  .lateral .etiqueta-menu,.lateral .separador{display:none}.lateral a{white-space:nowrap}}

/* ---------- métricas ---------- */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.metrica{position:relative;overflow:hidden;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino));
  border:1px solid var(--borde);border-radius:15px;padding:17px;
  box-shadow:var(--sombra-suave),var(--brillo)}
.metrica::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea-oro);opacity:.7}
.metrica span{color:var(--tenue);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.metrica b{display:block;font-size:27px;margin-top:6px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  color:var(--texto)}
.metrica.destacada b{background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.metrica.destacada{border-color:var(--borde-2)}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;padding:11px 12px;color:var(--oro);font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;border-bottom:1px solid var(--borde);white-space:nowrap}
.tabla td{padding:12px;border-bottom:1px solid var(--borde-suave);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla-scroll,.scroll{overflow-x:auto}
.estado{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;display:inline-block}
.estado.pendiente{background:#5E3F16;color:#F7E4B8;box-shadow:inset 0 0 0 1px rgba(232,195,111,.45)}
.estado.aprobado,.estado.activa,.estado.aprobada{background:#2C5A45;color:#CFF3E2;
  box-shadow:inset 0 0 0 1px rgba(127,209,166,.45)}
.estado.rechazado,.estado.vencida,.estado.rechazada{background:#6B1D2C;color:#FFD5DB;
  box-shadow:inset 0 0 0 1px rgba(240,140,153,.45)}

/* ---------- selector de fotos al subir ---------- */
.lista-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.foto-item{border:1px solid var(--borde);border-radius:15px;overflow:hidden;color:var(--texto);background:var(--fondo-2);
  box-shadow:var(--sombra-suave)}
.foto-item.bloqueada{border-color:var(--oro)}
.foto-item .vista{height:136px;position:relative;overflow:hidden;background:var(--hondo)}
.foto-item .vista img,.foto-item .vista canvas{width:100%;height:100%;object-fit:cover;transition:filter .3s}
.foto-item.bloqueada .vista img{filter:blur(13px) brightness(.9);transform:scale(1.15)}
.foto-item .marca{position:absolute;top:8px;right:8px;background:rgba(56,10,22,.85);
  border:1px solid var(--borde-2);color:var(--oro-claro);border-radius:999px;padding:3px 9px;
  font-size:10.5px;font-weight:800}
.foto-item .marca.vid{background:var(--oro-metal);color:#3A0A17;border-color:transparent}
.foto-item .opcion{display:flex;align-items:center;gap:8px;padding:11px;font-size:12.5px;font-weight:700;cursor:pointer}
.foto-item .opcion input{width:17px;height:17px;accent-color:var(--rosa)}

/* ---------- pago ---------- */
.metodos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px}
@media(max-width:520px){.metodos{grid-template-columns:1fr}}
.metodo{border:1px solid var(--borde);border-radius:15px;padding:15px;cursor:pointer;
  background:rgba(0,0,0,.18);box-shadow:var(--brillo);transition:all .16s ease}
.metodo:hover{border-color:var(--borde-2)}
.metodo.activo{border-color:var(--oro);background:rgba(217,178,111,.10);
  box-shadow:var(--brillo-oro),0 8px 20px rgba(0,0,0,.35)}
.metodo b{display:block;margin-bottom:2px;font-family:var(--display)}
.metodo small{color:var(--suave)}
.caja-pago{background:rgba(0,0,0,.22);border:1px dashed var(--borde-2);border-radius:15px;padding:16px;
  margin-bottom:16px;box-shadow:inset 0 2px 10px rgba(0,0,0,.3)}
.caja-pago .linea{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;
  border-bottom:1px solid var(--borde-suave)}
.caja-pago .linea:last-child{border-bottom:0}
.caja-pago .linea span{color:var(--suave)}
.caja-pago .linea b{text-align:right;word-break:break-all;font-variant-numeric:tabular-nums;color:var(--oro-claro)}

/* ---------- ficha y contador del chat ---------- */
.columnas-perfil{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-top:20px;align-items:start}
@media(max-width:820px){.columnas-perfil{grid-template-columns:1fr}}
.ficha dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin-top:14px}
.ficha dt{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--oro)}
.ficha dd{font-size:14px;font-weight:700;margin-top:3px;color:var(--texto)}
.contador-chat{background:linear-gradient(160deg,#5F1A2E,var(--tarjeta) 60%,var(--vino));border-color:var(--borde-2)}
.contador-chat .titulo-chat{font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:6px}
.contador-chat .boton{margin-top:14px}
.barra-progreso{height:10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--borde);
  overflow:hidden;margin:14px 0 9px;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.barra-progreso i{display:block;height:100%;border-radius:999px;background:var(--oro-metal);
  box-shadow:0 0 12px rgba(217,178,111,.5);transition:width .6s cubic-bezier(.22,.61,.36,1)}
.cifras-progreso{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--suave)}
.cifras-progreso b{color:var(--oro-claro);font-variant-numeric:tabular-nums}

/* ---------- casillas y permisos ---------- */
.casilla,.permiso{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--borde);
  border-radius:13px;padding:13px;cursor:pointer;background:rgba(0,0,0,.18);box-shadow:var(--brillo)}
.casilla:hover,.permiso:hover{border-color:var(--borde-2);background:rgba(217,178,111,.07)}
.casilla input,.permiso input{width:17px;height:17px;accent-color:var(--rosa);margin-top:2px;flex:none}
.casilla span,.permiso span{display:flex;flex-direction:column;gap:3px}
.casilla small,.permiso small{color:var(--suave);font-size:12.5px;line-height:1.45}
.permisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.permiso b{font-size:13.5px}

/* ---------- código de verificación ---------- */
.codigo-grande{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:8px;
  background:var(--oro-metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  border:1px dashed var(--borde-2);border-radius:14px;padding:18px;text-align:center;margin:14px 0 10px;
  background-color:rgba(0,0,0,.2)}

/* ---------- mis creadoras ---------- */
.rejilla-seguidas{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.seguida{color:var(--texto);background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino));
  border:1px solid var(--borde);border-radius:var(--radio);padding:17px;
  box-shadow:var(--sombra-suave),var(--brillo);display:flex;flex-direction:column;gap:13px}
.seguida .quien{display:flex;align-items:center;gap:11px}
.seguida .quien img{width:48px;height:48px;border-radius:50%;object-fit:cover;padding:2px;
  background-image:var(--oro-metal);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.seguida .datos-seguida{display:flex;gap:10px;background:rgba(0,0,0,.22);border-radius:12px;padding:12px 14px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3)}
.seguida .datos-seguida div{flex:1}
.seguida .datos-seguida span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tenue)}
.seguida .datos-seguida b{font-size:14px;color:var(--oro-claro)}
.seguida .acciones-seguida{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.seguida .acciones-seguida .boton{flex:1}

/* ---------- chat ---------- */
.chat{color:var(--texto);background:linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta));border:1px solid var(--borde);
  border-radius:var(--radio);box-shadow:var(--sombra),var(--brillo);overflow:hidden;display:flex;
  flex-direction:column;min-height:460px}
.chat-cabeza{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--borde);
  background:linear-gradient(180deg,rgba(217,178,111,.08),transparent)}
.chat-cabeza img{width:44px;height:44px;border-radius:50%;object-fit:cover;padding:2px;
  background-image:var(--oro-metal)}
.chat-cuerpo{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:10px;max-height:52vh;
  overflow-y:auto;background:rgba(0,0,0,.18);color:var(--texto)}
.globo{max-width:74%;align-self:flex-start;background:var(--elevado);border:1px solid var(--borde);
  border-radius:16px 16px 16px 5px;padding:12px 15px;font-size:14px;box-shadow:var(--sombra-suave)}
.globo.mio{align-self:flex-end;border-radius:16px 16px 5px 16px;color:#3A0A17;border-color:transparent;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-2))}
.globo .hora{display:block;font-size:10.5px;margin-top:5px;opacity:.7}
.chat-pie{display:flex;gap:10px;padding:14px;border-top:1px solid var(--borde);background:rgba(0,0,0,.14)}
.chat-pie textarea{flex:1;min-height:48px;max-height:130px;padding:13px 15px;border-radius:13px;
  border:1px solid var(--borde);background:rgba(0,0,0,.28);color:var(--texto);resize:vertical;
  font-family:inherit;font-size:14.5px;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.chat-pie textarea:focus{border-color:var(--oro);outline:none;box-shadow:0 0 0 3px rgba(217,178,111,.16)}

/* ---------- franja para invitar a ser creadora ---------- */
.franja-creadoras{position:relative;overflow:hidden;color:var(--texto);display:flex;gap:18px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;margin-top:28px;padding:26px 28px;border-radius:var(--radio);
  border:1px solid var(--borde-2);
  background:
    radial-gradient(520px 200px at 8% 0%, rgba(217,178,111,.20), transparent 62%),
    radial-gradient(520px 200px at 92% 100%, rgba(232,160,180,.18), transparent 62%),
    linear-gradient(160deg,var(--tarjeta-2),var(--vino));
  box-shadow:var(--sombra),var(--brillo)}
.franja-creadoras::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--linea-oro)}
.franja-creadoras b{font-family:var(--display);font-size:19px;display:block;margin-bottom:6px}
.franja-creadoras p{color:var(--suave);font-size:13.5px;max-width:560px;margin:0}

/* ---------- muro de la portada ---------- */
.muro-portada{margin-top:36px}

/* ---------- redes ---------- */
.redes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.redes a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--borde);background:rgba(0,0,0,.2);font-size:13px;font-weight:700;color:var(--texto)}
.redes a:hover{border-color:var(--oro);color:var(--oro-claro);background:rgba(217,178,111,.10)}

/* ---------- aviso de edad ---------- */
.edad-fondo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(58,10,23,.78);backdrop-filter:blur(8px)}
.edad-caja{max-width:440px;text-align:center;color:var(--texto);
  background:linear-gradient(160deg,var(--tarjeta-2),var(--vino));
  border:1px solid var(--borde-2);border-radius:22px;padding:34px 28px;
  box-shadow:var(--sombra-alta),var(--brillo-oro)}
.edad-caja img{height:98px;margin:0 auto 18px}
.edad-caja h2{font-family:var(--display);font-size:24px;margin-bottom:10px}
.edad-caja p{color:var(--suave);font-size:14px;margin-bottom:20px}
.edad-caja .acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- vacío y pie ---------- */
.vacio{text-align:center;padding:52px 20px;color:var(--suave)}
.vacio .icono{font-size:40px;margin-bottom:12px;opacity:.6}
footer.pie{position:relative;background:linear-gradient(180deg,var(--vino),#3A0A17);
  border-top:1px solid rgba(217,178,111,.28);padding-block:30px;
  color:rgba(247,237,230,.66);font-size:12.5px;margin-top:48px}
footer.pie::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--linea-oro)}
footer.pie .interior{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.pie a{color:rgba(247,237,230,.80)}
footer.pie a:hover{color:var(--oro-claro)}


/* =====================================================================
   CAPA DE LUJO · relieve 3D, brillo dorado en movimiento y entradas
   (todo se apaga solo si el teléfono o la PC piden "reducir movimiento")
   ===================================================================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes giro{to{--ang:360deg}}
@keyframes brillo-oro{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes barrido-linea{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes nubes{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.5%,0) scale(1.07)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.03)}
}
@keyframes entrada{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes aurora{to{transform:rotate(360deg)}}
@keyframes flotar-3d{
  0%,100%{transform:translateY(-50%) perspective(700px) rotateY(-20deg) rotateZ(-5deg)}
  50%{transform:translateY(-57%) perspective(700px) rotateY(20deg) rotateZ(4deg)}
}
@keyframes chispa{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  12%{opacity:.95}
  75%{opacity:.55}
  100%{transform:translate3d(var(--dx,0px),-460px,0) scale(1.15);opacity:0}
}
@keyframes latido{50%{transform:scale(1.12);filter:drop-shadow(0 0 16px rgba(240,216,154,.75))}}
@keyframes aparecer-modal{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes aparecer-pagina{from{opacity:0}to{opacity:1}}

/* oro que corre: un degradado que se repite sin cortes */
.hero h1 span,.precio b,.plan .valor,.metrica.destacada b,.codigo-grande{
  background-image:linear-gradient(110deg,#A8763C 0%,#F0D89A 18%,#D9B26F 32%,#FFF1C9 42%,#B98C4C 58%,#EBD096 78%,#A8763C 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo-oro 7s linear infinite;
}
.hero h1 span{animation-duration:5s}

/* ---------- fondo vivo: nubes de rosa y oro que respiran ---------- */
body{animation:aparecer-pagina .5s ease both}
body::before{
  content:'';position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(34vmax 34vmax at 16% 18%, rgba(232,160,180,.22), transparent 62%),
    radial-gradient(30vmax 30vmax at 86% 26%, rgba(217,178,111,.24), transparent 62%),
    radial-gradient(38vmax 38vmax at 62% 92%, rgba(217,178,111,.15), transparent 62%),
    radial-gradient(26vmax 26vmax at 8% 86%, rgba(232,160,180,.12), transparent 62%);
  animation:nubes 28s ease-in-out infinite alternate;
}
/* grano fino, como papel de lujo */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .05 0 0 0 0 .12 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- cabecera: vidrio, se encoge al bajar y su filete de oro corre ---------- */
.cabecera{transition:box-shadow .35s ease,background .35s ease}
.cabecera .interior{transition:height .35s cubic-bezier(.22,.61,.36,1)}
.cabecera.encogida{box-shadow:0 12px 36px rgba(58,10,23,.38);
  background:linear-gradient(180deg,rgba(64,11,26,.97),rgba(52,9,21,.95))}
.cabecera.encogida .interior{height:62px}
.cabecera::after{
  background:linear-gradient(90deg,transparent,rgba(217,178,111,.30) 22%,#F0D89A 50%,rgba(217,178,111,.30) 78%,transparent);
  background-size:200% 100%;animation:barrido-linea 7s linear infinite;
}
.logo img{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.logo:hover img{transform:scale(1.04);filter:drop-shadow(0 4px 14px rgba(217,178,111,.35))}
.menu.enlaces a{position:relative}
.menu.enlaces a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;border-radius:2px;
  background:var(--oro-metal);transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.menu.enlaces a:hover::after,.menu.enlaces a.activo::after{transform:scaleX(1)}
.avatar-mini{transition:transform .3s ease,box-shadow .3s ease}
.mi-cuenta:hover .avatar-mini{transform:scale(1.08) rotate(-4deg);box-shadow:0 0 0 3px rgba(217,178,111,.25),var(--sombra-suave)}

/* ---------- botones: destello que cruza y relieve al presionar ---------- */
.boton{position:relative;overflow:hidden;isolation:isolate}
.boton::after{
  content:'';position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .75s cubic-bezier(.22,.61,.36,1);
}
.boton:hover::after,a:hover > .boton::after,.creador-tarjeta:hover .boton::after{left:125%}
.boton.oro,.boton.violeta{background-image:linear-gradient(110deg,#A8763C 0%,#F0D89A 20%,#D9B26F 36%,#FFF1C9 46%,#B98C4C 62%,#EBD096 82%,#A8763C 100%);
  background-size:200% 100%;animation:brillo-oro 6s linear infinite}
@media (hover:none){.boton:active{transform:scale(.97)}}

/* ---------- relieve 3D que sigue al mouse (lo mueve app.js) ---------- */
.creador-tarjeta,.plan,.metrica,.seguida,.paso{
  --rx:0deg;--ry:0deg;--gx:50%;--gy:0%;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease;
}
.creador-tarjeta.moviendo,.plan.moviendo,.metrica.moviendo,.seguida.moviendo,.paso.moviendo{
  transition:transform .1s linear,box-shadow .45s ease,border-color .45s ease}
.creador-tarjeta:hover,.plan:hover,.seguida:hover{
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px);
  box-shadow:0 34px 60px -18px rgba(74,13,30,.62),0 0 0 1px rgba(240,216,154,.22),var(--brillo-oro)}
.metrica:hover,.paso:hover{
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  box-shadow:0 22px 40px -14px rgba(74,13,30,.55),var(--brillo-oro);border-color:var(--borde-2)}
/* la luz que se refleja donde está el mouse */
.creador-tarjeta::after,.plan::after,.metrica::after,.seguida::after,.paso::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:radial-gradient(380px circle at var(--gx) var(--gy),rgba(255,232,196,.16),transparent 46%);
  opacity:0;transition:opacity .45s ease}
.creador-tarjeta:hover::after,.plan:hover::after,.metrica:hover::after,.seguida:hover::after,.paso:hover::after{opacity:1}
.seguida,.paso{position:relative}

/* ---------- tarjeta de creadora ---------- */
.creador-tarjeta{
  border:1px solid transparent;
  background:
    linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino)) padding-box,
    linear-gradient(160deg,rgba(240,216,154,.50),rgba(217,178,111,.12) 38%,rgba(217,178,111,.06) 62%,rgba(240,216,154,.38)) border-box;
}
.creador-tarjeta.destacada{
  background:
    linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino)) padding-box,
    conic-gradient(from var(--ang),#7A5320,#F0D89A 14%,#D9B26F 26%,#7A5320 44%,#FFF1C9 58%,#B98C4C 74%,#7A5320) border-box;
  animation:giro 8s linear infinite;
}
.creador-tarjeta .tapa{
  background:
    repeating-linear-gradient(135deg,rgba(240,216,154,.05) 0 1px,transparent 1px 13px),
    radial-gradient(240px 120px at 80% 0%,rgba(232,160,180,.22),transparent 70%),
    linear-gradient(135deg,#6B1B31,#4A0D1E 60%,#7A2440)}
/* reflejo satinado que cruza la portada */
.creador-tarjeta .tapa::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,240,210,.22) 46%,transparent 62%);
  transform:translateX(-130%);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.creador-tarjeta:hover .tapa::before{transform:translateX(130%)}
.creador-tarjeta:hover .aro{animation:giro 3.2s linear infinite}
.creador-tarjeta .aro{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.creador-tarjeta:hover .aro{transform:scale(1.05)}
.creador-tarjeta .tapa .sello{
  background-image:linear-gradient(110deg,#A8763C 0%,#F0D89A 20%,#D9B26F 36%,#FFF1C9 46%,#B98C4C 62%,#EBD096 82%,#A8763C 100%);
  background-size:200% 100%;animation:brillo-oro 5s linear infinite}
.creador-tarjeta .nom{transition:color .3s ease}
.creador-tarjeta:hover .nom{color:#FFF6EC}
.insignia{position:relative;overflow:hidden}
.insignia::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:250% 100%;animation:brillo-oro 3.5s linear infinite}

/* ---------- portada (hero) ---------- */
.hero{
  --mx:50%;--my:0%;--px:0;--py:0;
  isolation:isolate;padding:70px 44px 62px;
  border:1px solid transparent;
  background:
    radial-gradient(520px 260px at var(--mx) var(--my),rgba(240,216,154,.16),transparent 70%) padding-box,
    radial-gradient(700px 300px at 15% 0%,rgba(232,160,180,.22),transparent 60%) padding-box,
    radial-gradient(760px 340px at 85% 100%,rgba(217,178,111,.20),transparent 62%) padding-box,
    linear-gradient(160deg,var(--tarjeta-2),var(--vino) 58%,#34091A) padding-box,
    conic-gradient(from var(--ang),rgba(217,178,111,.22),#F0D89A 10%,rgba(217,178,111,.22) 22%,rgba(217,178,111,.12) 48%,#D9B26F 60%,rgba(217,178,111,.22) 74%,rgba(217,178,111,.22)) border-box;
  animation:giro 10s linear infinite;
  box-shadow:0 40px 80px -30px rgba(74,13,30,.65),0 14px 30px -12px rgba(74,13,30,.35),var(--brillo);
}
.hero::after{content:'';position:absolute;inset:-45%;z-index:-2;pointer-events:none;filter:blur(28px);
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(232,160,180,.10) 12%,transparent 28%,rgba(217,178,111,.13) 52%,transparent 70%);
  animation:aurora 26s linear infinite}
.hero .emblema{position:absolute;right:5%;top:50%;width:200px;height:auto;opacity:.15;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45));animation:flotar-3d 13s ease-in-out infinite;
  translate:calc(var(--px) * -14px) calc(var(--py) * -10px);transition:translate .6s ease}
.hero .sello-hero{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:7px 18px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--oro-claro);
  border:1px solid var(--borde-2);background:rgba(0,0,0,.20);box-shadow:inset 0 1px 0 rgba(240,216,154,.22),0 6px 18px rgba(0,0,0,.25);
  animation:entrada .9s cubic-bezier(.22,.61,.36,1) .05s both}
.hero h1{animation:entrada 1s cubic-bezier(.22,.61,.36,1) .15s both;
  translate:calc(var(--px) * 8px) calc(var(--py) * 6px);transition:translate .6s ease}
.hero p{animation:entrada 1s cubic-bezier(.22,.61,.36,1) .3s both}
.hero .acciones{animation:entrada 1s cubic-bezier(.22,.61,.36,1) .45s both}
.hero .acciones .boton{padding:14px 26px;font-size:14.5px}
.hero .chispas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.hero .chispas i{position:absolute;bottom:-14px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#FFF6DE 0%,#F0D89A 38%,rgba(217,178,111,0) 72%);
  opacity:0;animation:chispa var(--t) linear var(--d) infinite}

/* ---------- títulos de sección con filete de oro ---------- */
h2.titulo,.muro-portada > .titulo{position:relative;padding-bottom:10px}
h2.titulo::after,.muro-portada > .titulo::after{content:'';position:absolute;left:0;bottom:0;width:54px;height:2px;border-radius:2px;
  background:var(--oro-metal)}

/* ---------- ¿cómo funciona?: tres pasos numerados ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;perspective:1200px}
.paso{overflow:hidden;border-radius:16px;padding:22px 20px 20px;color:var(--texto);
  background:linear-gradient(160deg,rgba(0,0,0,.26),rgba(0,0,0,.12));
  border:1px solid var(--borde);box-shadow:inset 0 1px 0 rgba(255,240,210,.06)}
.paso .num{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;margin-bottom:14px;
  font-family:var(--display);font-size:19px;font-weight:700;color:#3A0A17;
  background-image:linear-gradient(110deg,#A8763C 0%,#F0D89A 20%,#D9B26F 36%,#FFF1C9 46%,#B98C4C 62%,#EBD096 82%,#A8763C 100%);
  background-size:200% 100%;animation:brillo-oro 6s linear infinite;
  box-shadow:var(--brillo-oro),0 8px 18px rgba(0,0,0,.4)}
.paso b{display:block;font-family:var(--display);font-size:17px;margin-bottom:6px;color:var(--texto)}
.paso p{color:var(--suave);font-size:13.5px;line-height:1.55}
.como-funciona{overflow:hidden}

/* ---------- planes ---------- */
.plan.mio{
  border:1px solid transparent;
  background:
    linear-gradient(160deg,#5F1A2E,var(--tarjeta) 60%,var(--vino)) padding-box,
    conic-gradient(from var(--ang),#7A5320,#F0D89A 14%,#D9B26F 26%,#7A5320 44%,#FFF1C9 58%,#B98C4C 74%,#7A5320) border-box;
  animation:giro 8s linear infinite}

/* ---------- métricas ---------- */
.metrica{border-color:transparent;
  background:
    linear-gradient(160deg,var(--tarjeta-2),var(--tarjeta) 60%,var(--vino)) padding-box,
    linear-gradient(160deg,rgba(240,216,154,.42),rgba(217,178,111,.10) 45%,rgba(240,216,154,.28)) border-box;
  border:1px solid transparent}
.metrica b{font-variant-numeric:tabular-nums}

/* ---------- publicaciones ---------- */
.publicacion{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease}
.publicacion:hover{transform:translateY(-4px);box-shadow:0 30px 56px -22px rgba(74,13,30,.6),var(--brillo-oro)}
.medio img,.medio video{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.publicacion:hover .medio img{transform:scale(1.035)}
.candado .icono{display:inline-block;animation:latido 2.8s ease-in-out infinite}
.publicacion .acciones button{transition:color .2s ease,transform .2s ease}
.publicacion .acciones button:hover{transform:scale(1.08)}

/* ---------- lateral de los paneles ---------- */
.lateral a{position:relative}
.lateral a:hover{transform:translateX(3px)}
.lateral a.activo::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;
  background:var(--oro-metal);box-shadow:0 0 12px rgba(217,178,111,.6)}

/* ---------- listas cortas de creadoras (muro, mi feed) ---------- */
.lista-mini{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.lista-mini .mini{display:flex;gap:11px;align-items:center;padding:8px;border-radius:12px;
  transition:background .25s ease,transform .25s ease}
.lista-mini .mini:hover{background:rgba(247,237,230,.06);transform:translateX(3px)}
.lista-mini img{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;padding:2px;
  background-image:var(--oro-metal);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.mini-datos{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.mini-datos b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-datos small{font-size:12.5px;color:var(--suave)}
.mini .estrella{color:var(--oro)}
.columnas.con-aside{grid-template-columns:minmax(0,1fr) 300px}
.columnas.con-aside > aside{position:sticky;top:92px}
.columnas.con-aside > aside .tarjeta + .tarjeta{margin-top:16px}
.columnas.con-conversaciones{grid-template-columns:300px minmax(0,1fr)}

/* ---------- muro de la portada: en cuadrícula ---------- */
.pubs-portada{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.pubs-portada .publicacion{margin-bottom:0}
.pubs-portada .galeria.n1 .medio img,.pubs-portada .galeria.n1 .medio video{aspect-ratio:1/1;height:auto;max-height:none}

/* ---------- franja para creadoras y aviso de edad con aro de oro ---------- */
.franja-creadoras{border:1px solid transparent;
  background:
    radial-gradient(520px 200px at 8% 0%,rgba(217,178,111,.20),transparent 62%) padding-box,
    radial-gradient(520px 200px at 92% 100%,rgba(232,160,180,.18),transparent 62%) padding-box,
    linear-gradient(160deg,var(--tarjeta-2),var(--vino)) padding-box,
    conic-gradient(from var(--ang),rgba(217,178,111,.25),#F0D89A 12%,rgba(217,178,111,.25) 26%,rgba(217,178,111,.14) 50%,#D9B26F 62%,rgba(217,178,111,.25) 76%) border-box;
  animation:giro 12s linear infinite}
.edad-fondo{animation:aparecer-pagina .4s ease both}
.edad-caja{border:1px solid transparent;
  background:
    linear-gradient(160deg,var(--tarjeta-2),var(--vino)) padding-box,
    conic-gradient(from var(--ang),#7A5320,#F0D89A 14%,#D9B26F 26%,#7A5320 44%,#FFF1C9 58%,#B98C4C 74%,#7A5320) border-box;
  animation:aparecer-modal .8s cubic-bezier(.2,.8,.2,1) .1s both,giro 9s linear infinite}
.edad-caja img{filter:drop-shadow(0 10px 26px rgba(217,178,111,.35))}

/* ---------- pie ---------- */
footer.pie::before{background:linear-gradient(90deg,transparent,rgba(217,178,111,.3) 22%,#F0D89A 50%,rgba(217,178,111,.3) 78%,transparent);
  background-size:200% 100%;animation:barrido-linea 9s linear infinite}
footer.pie a{position:relative;transition:color .25s ease}

/* ---------- entrar al bajar (lo activa app.js) ---------- */
.revelar{opacity:0;translate:0 30px;scale:.97;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1) var(--retraso,0ms),
             translate .95s cubic-bezier(.22,.61,.36,1) var(--retraso,0ms),
             scale .95s cubic-bezier(.22,.61,.36,1) var(--retraso,0ms)!important}
.revelar.visto{opacity:1;translate:0 0;scale:1}

/* ---------- carrusel: puntos que marcan dónde vas ---------- */
.puntos{display:none;justify-content:center;gap:7px;margin:-6px 0 14px}
.puntos.activos{display:flex}
.puntos i{width:7px;height:7px;border-radius:999px;background:rgba(74,13,30,.20);transition:width .35s ease,background .35s ease}
.puntos i.activo{width:22px;background:var(--oro-metal)}
.tarjeta .puntos i{background:rgba(247,237,230,.22)}

/* =====================================================================
   TABLETA Y TELÉFONO · nada de una tarjeta encima de la otra a lo largo
   ===================================================================== */
@media(max-width:1024px){
  .cabecera .interior{padding-block:12px}
  .menu.enlaces{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .cabecera.encogida .interior{height:auto;padding-block:8px}
  .pubs-portada{gap:14px}
}
@media(max-width:900px){
  .columnas.con-aside,.columnas.con-conversaciones{grid-template-columns:minmax(0,1fr)}
  .columnas.con-aside > aside{order:-1;position:static}
  /* la lista de creadoras se vuelve una tira de fotos que se desliza */
  .lista-lateral .lista-mini{flex-direction:row;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;
    padding:2px 2px 6px;scrollbar-width:none}
  .lista-lateral .lista-mini::-webkit-scrollbar{display:none}
  .lista-lateral .mini{flex:none;flex-direction:column;width:86px;text-align:center;gap:7px;scroll-snap-align:start;padding:8px 4px}
  .lista-lateral .mini:hover{transform:none}
  .lista-lateral .mini img{width:62px;height:62px;padding:2.5px}
  .lista-lateral .mini-datos b{font-size:12px}
  .lista-lateral .mini-datos small{font-size:11px}
  .columnas.con-aside > aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
  .columnas.con-aside > aside .tarjeta + .tarjeta{margin-top:0}
  .lateral a:hover{transform:none}
  .lateral a.activo::before{left:14px;right:14px;top:auto;bottom:3px;width:auto;height:2px}
}
@media(max-width:760px){
  /* carruseles que se deslizan con el dedo y dejan ver la siguiente */
  .carrusel,.pasos,.pubs-portada{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:14px;margin-inline:-18px;padding:8px 18px 22px;scroll-padding-inline:18px;scrollbar-width:none}
  .carrusel::-webkit-scrollbar,.pasos::-webkit-scrollbar,.pubs-portada::-webkit-scrollbar{display:none}
  .carrusel > *,.pasos > *,.pubs-portada > *{scroll-snap-align:start}
  .pasos{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;grid-auto-columns:78%}
  .planes.carrusel{grid-auto-columns:76%;justify-content:start}
  .pubs-portada{grid-auto-columns:88%;align-items:start}
  .rejilla-seguidas.carrusel{grid-auto-columns:86%}
  .hero{padding:52px 22px 46px;border-radius:24px}
  .hero .emblema{width:130px;right:-4%;top:22%;opacity:.12}
  .hero h1{font-size:32px}
  .hero .acciones .boton{padding:13px 20px}
}
@media(max-width:600px){
  /* explorar: dos columnas de tarjetas compactas */
  .rejilla.compacta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rejilla.compacta .tapa{height:78px}
  .rejilla.compacta .aro{width:58px;height:58px;margin:-31px 0 0 12px;padding:2px;box-shadow:0 8px 18px rgba(0,0,0,.5),0 0 0 3px rgba(56,10,22,.92)}
  .rejilla.compacta .datos{padding:9px 11px 11px}
  .rejilla.compacta .nom{font-size:14.5px}
  .rejilla.compacta .arroba{font-size:11.5px}
  .rejilla.compacta .ubicacion{gap:5px;margin-top:5px}
  .rejilla.compacta .pais span,.rejilla.compacta .ciudad-nombre{font-size:11px}
  .rejilla.compacta .bio{font-size:12px;margin:7px 0 10px;min-height:36px}
  .rejilla.compacta .pie{flex-direction:column;align-items:stretch;gap:8px;padding:10px;text-align:center}
  .rejilla.compacta .precio{align-items:center}
  .rejilla.compacta .pie .boton.chico{width:100%;padding:9px 10px}
  .rejilla.compacta .tapa .sello{top:7px;right:7px;padding:3px 8px;font-size:10px}

  /* explorar: filtros en dos columnas */
  .filtros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .filtros > .campo{min-width:0!important}
  .filtros > .campo:first-of-type{grid-column:1/-1}
  .filtros > div:last-child{grid-column:1/-1}
  .filtros > div:last-child .boton{flex:1;padding:11px}

  /* números del panel: dos por fila */
  .metricas{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .metrica{padding:15px 14px}
  .metrica b{font-size:23px}

  /* cifras del perfil: tres arriba y dos abajo */
  .estadisticas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .estadisticas div{grid-column:span 2;padding:14px 8px;text-align:center;font-size:10.5px;
    border-left:1px solid var(--borde-suave);border-top:1px solid var(--borde-suave)}
  .estadisticas div:nth-child(-n+3){border-top:0}
  .estadisticas div:nth-child(1),.estadisticas div:nth-child(4){border-left:0}
  .estadisticas div:nth-child(n+4){grid-column:span 3}
  .estadisticas b{font-size:18px}

  .metodos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .permisos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .permiso,.casilla{padding:11px}
  .perfil-portada{height:150px}
  .perfil-foto{width:98px;height:98px;margin-top:-49px}
  .perfil-datos h1{font-size:23px}
  .acciones-perfil{width:100%}
  .acciones-perfil .boton{flex:1}
  .titulo{font-size:21px}
  .tabla{font-size:13px}
  .tabla th,.tabla td{white-space:nowrap}
}
@media(max-width:380px){
  .permisos{grid-template-columns:1fr}
}

/* ---------- quien pide menos movimiento, lo tiene ---------- */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .revelar{opacity:1;translate:none;scale:none}
  .hero .chispas{display:none}
}

/* ---------- buscador de los paneles (queda sobre el crema) ---------- */
.buscar-panel{flex:1;min-width:0;padding:12px 16px;border-radius:13px;outline:none;color:var(--texto);
  border:1px solid var(--borde-2);background:linear-gradient(160deg,var(--tarjeta-2),var(--vino));
  box-shadow:var(--sombra-suave),inset 0 2px 8px rgba(0,0,0,.25)}
.buscar-panel::placeholder{color:var(--tenue)}
.buscar-panel:focus{border-color:var(--oro);box-shadow:var(--sombra-suave),0 0 0 3px rgba(217,178,111,.22)}

/* ---------- tablas anchas: se desvanecen a la derecha mientras haya más que ver ---------- */
.tabla-scroll.desliza{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.estadisticas div:last-child{flex:1.5 1 180px}
/* en rejillas las tarjetas no se empujan hacia abajo entre sí */
.columnas-perfil > .tarjeta,.rejilla > .tarjeta,.metricas > .tarjeta{margin-top:0}
/* portada vacía del perfil: satinado en oro con luz */
.perfil-portada{
  background:
    repeating-linear-gradient(135deg,rgba(240,216,154,.05) 0 1px,transparent 1px 14px),
    radial-gradient(420px 200px at 82% 0%,rgba(232,160,180,.24),transparent 70%),
    radial-gradient(380px 180px at 10% 100%,rgba(217,178,111,.16),transparent 70%),
    linear-gradient(135deg,#6B1B31,#4A0D1E 55%,#7A2440)}
@media(min-width:601px){.estadisticas div:last-child b{white-space:nowrap;font-size:19px}}

/* ---------- videos de Bunny Stream ---------- */
.video-stream{position:relative;width:100%;aspect-ratio:16/9;background:#1E050C}
.video-stream iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.galeria.n2 .video-stream,.galeria.n3 .video-stream,.galeria.n4 .video-stream{aspect-ratio:auto;height:230px}
.medio .cinta.libre{pointer-events:none}