@charset "UTF-8";
/* ============================================================
   SOCIAS AGENCY — CAPA VIP (tema oscuro cinematográfico)

   Se carga DESPUÉS de site.css (y de formulario.css en
   servicios.html). No sustituye nada: solo repinta la paleta y
   corrige los sitios donde el diseño claro daba por hecho que el
   fondo era papel blanco.

   Si algún día quieres volver al diseño claro, basta con quitar
   la línea <link ... vip.css> de las páginas. Nada más.
   ============================================================ */

/* ─── 1. La paleta entera, del revés ─── */
:root {
  --papel:      #070605;   /* fondo: negro cálido */
  --papel-2:    #100E0A;   /* superficies elevadas */
  --tinta:      #EFE9DC;   /* ahora es el TEXTO (antes el fondo) */
  --linea:      rgba(239, 233, 220, .11);
  --gris:       #8D8778;
  --gris-2:     #6D6759;

  /* propias de la capa VIP */
  --vip-neon:   #FBCA03;
  --vip-suave:  #FFDF5C;
  --vip-negro:  #070605;
  --vip-panel:  #100E0A;
  --display:    "Anton", "Inter", sans-serif;
}

/* Variables internas del formulario de proyecto (servicios.html) */
:root {
  --border2: rgba(239, 233, 220, .18);
}

html { background: var(--vip-negro); }
body { background: var(--vip-negro); color: var(--tinta); font-weight: 300; }

::selection { background: var(--vip-neon); color: var(--vip-negro); }
::-webkit-scrollbar-track { background: var(--vip-negro); }
::-webkit-scrollbar-thumb { background: #3A3008; }
::-webkit-scrollbar-thumb:hover { background: #A08206; }

/* ─── 2. Atmósfera: halo de luz + grano de película ─── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 88% -10%, rgba(251, 202, 3, .10), transparent 65%),
    radial-gradient(50vw 50vw at -12% 108%, rgba(200, 150, 10, .07), transparent 65%);
}
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 80;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: vip-grano 7s steps(10) infinite;
}
@keyframes vip-grano {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, 2%); }
  30% { transform: translate(2%, -4%); }
  50% { transform: translate(-2%, 3%); }
  70% { transform: translate(4%, -2%); }
  90% { transform: translate(-3%, -3%); }
}
/* El contenido siempre por encima de la atmósfera.
   OJO: aquí solo van elementos del flujo normal. La cabecera, el menú
   móvil, la barra de progreso y el formulario ya van fijos con su
   propio z-index en site.css — tocarles el position los rompe. */
.bloque, .portada, .cierre, .pie, main, footer, section:not(.cab) {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ─── 3. Titulares con la tipografía de la portada ─── */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.02;
}
h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
/* La cursiva editorial se mantiene: es parte de la marca */
em, .cursiva, .accent {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vip-suave);
}
h1 em, h2 em, h1 .cursiva, h2 .cursiva { text-shadow: 0 0 30px rgba(251, 202, 3, .35); }
.entradilla, .cierre-sub { color: var(--gris); }

/* ─── 4. Botones ─── */
.btn {
  border-radius: 2px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--vip-neon);
  border: 1px solid rgba(251, 202, 3, .4);
  overflow: hidden;
  position: relative;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vip-neon);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.19, 1, .22, 1);
  z-index: -1;
}
.btn:hover {
  background: transparent;
  color: var(--vip-negro);
  border-color: var(--vip-neon);
  box-shadow: 0 0 30px rgba(251, 202, 3, .28);
  transform: translateY(-2px);
}
.btn:hover::before { transform: translateY(0); }
.btn-amarillo,
.cierre .btn {
  background: var(--vip-neon);
  color: var(--vip-negro);
  border-color: var(--vip-neon);
  box-shadow: 0 0 26px rgba(251, 202, 3, .25);
}
.btn-amarillo::before,
.cierre .btn::before { background: var(--vip-negro); }
.btn-amarillo:hover,
.cierre .btn:hover { color: var(--vip-neon); background: var(--vip-neon); }
.btn-linea { color: var(--tinta); border-color: rgba(239, 233, 220, .28); }
.btn-linea:hover { color: var(--vip-negro); border-color: var(--vip-neon); }
.btn-linea::before { background: var(--vip-neon); }
.flecha:hover { color: var(--vip-suave); }

/* ─── 5. Cabecera y menú ─── */
.cab.pegada {
  background: rgba(7, 6, 5, .78);
  border-bottom-color: rgba(239, 233, 220, .09);
}
.cab-logo img { filter: drop-shadow(0 0 10px rgba(251, 202, 3, .35)); }
.cab-logo-txt { color: var(--tinta); }
.cab-nav a { color: var(--gris); }
.cab-nav a:hover { color: var(--tinta); }
.cab-nav a::after { box-shadow: 0 0 8px var(--vip-neon); }
.hamb span { background: var(--tinta); }
.menu-movil { background: rgba(7, 6, 5, .97); }
.menu-movil a { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.menu-movil a:hover { color: var(--vip-neon); }
#progreso { box-shadow: 0 0 12px var(--vip-neon); }

/* ─── 6. Portada de las páginas internas ─── */
.portada-logo {
  background: var(--vip-panel);
  border: 1px solid rgba(251, 202, 3, .16);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7), inset 0 0 80px rgba(0, 0, 0, .5);
}
.portada-dato { color: var(--gris); }
.rotulo { color: var(--gris-2); }
.rotulo::before { background: var(--vip-neon); box-shadow: 0 0 8px var(--vip-neon); }

/* ─── 7. Tarjetas, listas y bloques ─── */
.bloque[style*="papel-2"],
section[style*="papel-2"] { background: #0B0A08 !important; }

.paso { background: var(--vip-panel); }
.paso:hover { background: #14110C; }
.paso li::before { box-shadow: 0 0 6px var(--vip-neon); }
.pasos { background: var(--linea); border-color: var(--linea); }

.cifra { border-top-color: var(--vip-neon); }
.cifra-n { font-family: var(--display); letter-spacing: .02em; }
.cifra-n sup { color: var(--vip-neon); }
.cifra-d { color: var(--gris); }

.servicio-txt { color: var(--gris); }
.servicio-etq { color: var(--gris); border-color: var(--linea); }
.servicio:hover .servicio-etq { border-color: rgba(251, 202, 3, .45); color: var(--vip-suave); }

/* Índice de trabajos de la home antigua (por si se reutiliza) */
.indice-fila:hover { background: rgba(251, 202, 3, .045); }
.indice-sector { color: var(--gris); }
.indice-num { color: var(--gris-2); }

/* ─── 8. Planes y precios ─── */
.plan {
  background: var(--vip-panel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1), border-color .5s, box-shadow .5s;
}
.plan:hover {
  transform: translateY(-8px);
  border-color: rgba(251, 202, 3, .4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(251, 202, 3, .08);
}
.plan-nombre { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.plan-precio { font-family: var(--display); color: var(--tinta); letter-spacing: .01em; }
.plan-precio .euro, .plan-desde { color: var(--vip-neon); }
.plan-lista li { color: var(--gris); }
.plan-sello {
  background: var(--vip-neon);
  color: var(--vip-negro);
  box-shadow: 0 0 24px rgba(251, 202, 3, .35);
}
.plan-extra { color: var(--gris-2); border-top-color: var(--linea); }
.plan.destacado {
  border-color: rgba(251, 202, 3, .45);
  box-shadow: 0 0 50px rgba(251, 202, 3, .1);
}

/* ─── 9. Preguntas frecuentes ─── */
.faq-p { font-family: "Inter", sans-serif; font-weight: 400; font-size: clamp(16px, 1.6vw, 19px); }
.faq-p:hover { color: var(--vip-suave); }
.faq-icono { color: var(--vip-neon); border-color: var(--linea); }
.faq-item.abierta .faq-icono {
  background: var(--vip-neon);
  border-color: var(--vip-neon);
  color: var(--vip-negro);
}
.faq-r p { color: var(--gris); }

/* ─── 10. Bloque de cierre (era amarillo macizo) ─── */
.cierre {
  background: var(--vip-negro);
  color: var(--tinta);
  position: relative;
  overflow: hidden;
}
.cierre::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 760px; height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 202, 3, .14), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.cierre .env { position: relative; z-index: 2; }
.cierre .rotulo { color: var(--gris-2); }
.cierre .rotulo::before { background: var(--vip-neon); }
.cierre-sub { color: var(--gris); }
.cierre h2 em, .cierre h2 .cursiva { color: var(--vip-neon); }

/* ─── 11. Pie ─── */
.pie {
  background: rgba(7, 6, 5, .9);
  color: var(--tinta);
  border-top: 1px solid var(--linea);
}
.pie-logo img { filter: drop-shadow(0 0 14px rgba(251, 202, 3, .3)); }
.pie-tag { color: var(--gris); }
.pie-col-t { color: var(--gris-2); }
.pie-links a { color: var(--gris); }
.pie-links a:hover { color: var(--vip-neon); }
.pie-input {
  background: rgba(239, 233, 220, .04);
  border-color: var(--linea);
  color: var(--tinta);
  border-radius: 2px 0 0 2px;
}
.pie-input::placeholder { color: #57503C; }
.pie-btn {
  background: var(--vip-neon);
  color: var(--vip-negro);
  border-radius: 0 2px 2px 0;
  font-family: "Space Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pie-social a { color: var(--gris); border-color: var(--linea); }
.pie-abajo { border-top-color: var(--linea); color: var(--gris-2); }

/* ─── 12. Formularios (contacto.html y los 5 pasos de servicios.html) ─── */
.campo, .form-input, .form-select, .form-area, .po-input, .po-field {
  background: rgba(239, 233, 220, .04);
  border: 1px solid var(--linea);
  color: var(--tinta);
  border-radius: 2px;
}
.campo::placeholder, .form-input::placeholder, .form-area::placeholder,
.po-input::placeholder { color: #57503C; }
.campo:focus, .form-input:focus, .form-select:focus, .form-area:focus, .po-input:focus {
  border-color: var(--vip-neon);
  box-shadow: 0 0 0 3px rgba(251, 202, 3, .18);
  outline: none;
}
.form-select option { background: var(--vip-panel); color: var(--tinta); }
.campo-k { color: var(--gris); }
.campo-k .req { color: var(--vip-neon); }
.form-aviso.ok { color: #8EC33D; }
.form-aviso.mal { color: #E0653A; }
.po-chip {
  background: rgba(239, 233, 220, .04);
  border: 1px solid var(--linea);
  color: var(--tinta);
}
.po-chip:hover { border-color: rgba(251, 202, 3, .45); }
.po-copy, .po-field-label { color: var(--gris); }
.po-grid-bg { opacity: .5; }
.po-plan { background: var(--vip-panel); border-color: var(--linea); }
.po-plan.selected { border-color: var(--vip-neon); }
.po-btn-back { color: var(--gris); border-color: var(--linea); }
.po-btn-back:hover { color: var(--tinta); border-color: var(--vip-neon); }

/* ─── 12 bis. TODO lo que tenga fondo amarillo lleva texto NEGRO ───
   El diseño claro usaba --tinta (casi negro) como texto sobre el
   amarillo. Al invertir la paleta, --tinta pasó a ser crema y esos
   elementos se quedaron ilegibles. Aquí se les devuelve el negro. */
.plan-extra,
.plan-sello,
.via-icono,
.po-btn-next,
.po-chip.on,
.po-chip.active,
.po-close:hover,
.po-copy:hover,
.po-plan.selected::before,
.indice-fila:hover .indice-mas,
.faq-item.abierta .faq-icono,
.pie-btn,
.btn-amarillo {
  color: var(--vip-negro) !important;
  font-weight: 700;
}
.plan-extra {
  background: var(--vip-neon);
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(251, 202, 3, .22);
}
.po-chip.on, .po-chip.active { background: var(--vip-neon); border-color: var(--vip-neon); }
.via-icono { box-shadow: 0 0 18px rgba(251, 202, 3, .3); }

/* ─── 12 ter. FORMULARIO DE PROYECTO Y PAGO ───
   El HTML y el JS del formulario NO se tocan (ahí van los cobros de
   Stripe y Bizum). Aquí solo se repinta lo que tenía el color claro
   escrito a fuego y en oscuro quedaba ilegible. */
.po-head,
.po-nav{
  background:rgba(7,6,5,.92)!important;
  border-color:var(--linea)!important;
}
.po-head-logo img{filter:drop-shadow(0 0 10px rgba(251,202,3,.3))}
.po-head-mid,.po-nav-info,.po-step-sub{color:var(--gris-2)}
.po-step-label{color:var(--vip-neon)}

.po-plan.selected{
  border-color:var(--vip-neon)!important;
  background:rgba(251,202,3,.07)!important;
  box-shadow:0 0 34px rgba(251,202,3,.12);
}
.po-plan-name{color:var(--gris-2)}
.po-plan-price{color:var(--tinta)}

/* El botón de PAGAR: amarillo de marca y texto negro, también al pasar
   el ratón (antes se ponía oscuro sobre oscuro y desaparecía). */
.po-stripe-btn{
  background:var(--vip-neon)!important;
  color:var(--vip-negro)!important;
  border-radius:2px;
  font-family:"Space Mono",monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  box-shadow:0 0 28px rgba(251,202,3,.25);
}
.po-stripe-btn:hover{
  background:var(--vip-suave)!important;
  color:var(--vip-negro)!important;
  box-shadow:0 0 42px rgba(251,202,3,.4);
}
.po-pay-head{color:var(--tinta)}
.po-pay-note,.po-pay-detail{background:var(--vip-panel);border-color:var(--linea)}
.po-pay-note,.po-pay-hint,.po-pd-k{color:var(--gris)}
.po-pd-v,.po-pay-hint b{color:var(--tinta)}
.po-pay-note a{color:var(--vip-suave)}
#po-concept,#po-concept-2{color:var(--vip-neon)}
.po-summary,.po-resumen{background:var(--vip-panel);border-color:var(--linea)}

/* ─── 13. Foto flotante del índice ─── */
#vistaprevia { border: 1px solid var(--linea); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }

/* ─── 14. Texto largo de las páginas legales ─── */
main p, main li, .legal p, .legal li { color: var(--gris); }
main a:not(.btn), .legal a:not(.btn) { color: var(--vip-suave); }
main strong, .legal strong { color: var(--tinta); }