/* Web de Naye Gómez · creadora de contenido UGC
   Colores: burdeos #6B1E2C, crema #F4EFE4, mantequilla #F2E88A, piedra #E6DFD0 */

@font-face { font-family: Jost; font-weight: 400; font-display: swap; src: url(/fuentes/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Jost; font-weight: 500; font-display: swap; src: url(/fuentes/jost-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Jost; font-weight: 600; font-display: swap; src: url(/fuentes/jost-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Jost; font-weight: 700; font-display: swap; src: url(/fuentes/jost-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Pinyon Script'; font-weight: 400; font-display: swap; src: url(/fuentes/pinyon-script-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Oranienbaum; font-weight: 400; font-display: swap; src: url(/fuentes/oranienbaum-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fuentes/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --burdeos: #6B1E2C;
  --burdeos-osc: #4F1520;
  --crema: #F4EFE4;
  --mantequilla: #F2E88A;
  --piedra: #E6DFD0;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--burdeos); font-family: Jost, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--burdeos); text-decoration-color: var(--mantequilla); text-decoration-thickness: 4px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
input, textarea, button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--burdeos); outline-offset: 3px; }
.oscuro :focus-visible { outline-color: var(--mantequilla); }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.serif { font-family: Oranienbaum, serif; font-weight: 400; }
.script { font-family: 'Pinyon Script', cursive; font-weight: 400; }
.contenedor { max-width: 1240px; margin: 0 auto; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(244,239,228,.78); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(107,30,44,.12); }
.cabecera nav { padding: 12px 28px 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca .script { font-size: 38px; line-height: .8; }
.marca .usuario { font: 600 11px/1 Jost; letter-spacing: .22em; }
.nav-derecha { display: flex; align-items: center; gap: 18px; }
.idioma { font: 600 12px/1 Jost; letter-spacing: .14em; white-space: nowrap; }
.idioma a { text-decoration: none; opacity: .55; }
.idioma a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-color: var(--mantequilla); text-decoration-thickness: 3px; }
.idioma a:hover { opacity: 1; }
.pestanas { padding: 0 28px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { text-decoration: none; text-align: center; white-space: nowrap; padding: 11px 12px 10px; border-radius: 12px 12px 0 0; background: rgba(107,30,44,.06); font: 500 13px/1 Jost; letter-spacing: .04em; transition: background .35s var(--curva); }
.pestanas a:hover { background: var(--mantequilla); }
.pestanas a.activa { background: var(--mantequilla); font-weight: 600; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; text-decoration: none; border: none; cursor: pointer; border-radius: 999px; font-weight: 600; letter-spacing: .12em; transition: transform .15s ease-out, background .2s; }
.boton:active { transform: scale(.97); }
.boton .flecha { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 400; }
.boton-burdeos { background: var(--burdeos); color: var(--crema); }
.boton-burdeos:hover { background: var(--burdeos-osc); }
.boton-burdeos .flecha { background: var(--crema); color: var(--burdeos); }
.boton-mantequilla, .oscuro a.boton-mantequilla { background: var(--mantequilla); color: var(--burdeos); }
.boton-mantequilla:hover { background: #fff; }
.boton-mantequilla .flecha { background: var(--burdeos); color: var(--crema); }
.boton-s { gap: 10px; padding: 5px 5px 5px 18px; font-size: 12px; line-height: 1; }
.boton-s .flecha { width: 28px; height: 28px; font-size: 14px; }
.boton-m { gap: 14px; padding: 7px 7px 7px 24px; font-size: 14px; line-height: 1; }
.boton-m .flecha { width: 38px; height: 38px; font-size: 18px; }
.boton-l { gap: 12px; padding: 8px 8px 8px 28px; font-size: 15px; line-height: 1; }
.boton-l .flecha { width: 38px; height: 38px; font-size: 18px; }
.enlace-mayus { font: 600 14px/1 Jost; letter-spacing: .12em; }

/* ---------- Huecos para fotos y vídeos (hasta que Naye los suba) ---------- */
.hueco { width: 100%; height: 100%; background: var(--piedra); display: flex; align-items: center; justify-content: center; }
.hueco img.asterisco { width: 22%; max-width: 90px; height: auto; opacity: .55; }
.media { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Secciones apiladas ---------- */
.seccion { position: relative; margin-top: -36px; border-radius: 36px 36px 0 0; box-shadow: 0 -24px 48px -24px rgba(42,42,42,.22); scroll-margin-top: 90px; padding: 110px 28px; }
.oscuro { background: var(--burdeos); color: var(--crema); }
/* Al subir desde abajo, la sección de detrás se prolonga para que no quede hueco */
.seccion::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 220px; background: inherit; z-index: -1; pointer-events: none; }
.js-sube .seccion { will-change: transform; }
.oscuro a { color: var(--crema); }
.titulo-seccion { margin: 0; font: 400 clamp(60px, 7vw, 92px)/.86 Oranienbaum; }
.titulo-seccion .script { font-size: 1.02em; }
.oscuro .titulo-seccion .script { color: var(--mantequilla); }

/* ---------- Inicio ---------- */
.inicio { padding: 96px 28px 110px; }
.inicio .contenedor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: center; }
.inicio .texto { display: flex; flex-direction: column; gap: 28px; }
.antetitulo { font: 600 13px/1 Jost; letter-spacing: .24em; }
.inicio h1 { margin: 0; display: flex; flex-direction: column; }
.inicio h1 .serif { font-size: clamp(90px, 11vw, 170px); line-height: .82; letter-spacing: -.01em; }
.inicio h1 .script { font-size: clamp(70px, 8.6vw, 130px); line-height: .8; margin-left: .9em; }
.inicio .entrada { margin: 0; max-width: 460px; font: 400 19px/1.55 Jost; text-wrap: pretty; }
.acciones { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.foto-inicio { justify-self: center; width: min(100%, 440px); aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; }

/* ---------- Cinta de formatos ---------- */
.cinta-formatos { overflow: hidden; border-top: 1px solid rgba(107,30,44,.12); padding: 22px 0 58px; }
.cinta-formatos .pista { display: flex; gap: 36px; width: max-content; will-change: transform; }
.cinta-formatos .item { display: flex; align-items: center; gap: 36px; white-space: nowrap; font: 400 38px/1 Oranienbaum; }
.cinta-formatos .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--mantequilla); box-shadow: 0 0 0 1px var(--burdeos); }

/* ---------- Sobre mí ---------- */
#sobre-mi { z-index: 2; }
#sobre-mi .contenedor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 64px; align-items: center; }
.foto-sobre { width: min(100%, 400px); justify-self: center; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; }
#sobre-mi .texto { display: flex; flex-direction: column; gap: 22px; }
#sobre-mi h2 .script { font-size: 1.05em; color: var(--mantequilla); }
.parrafos { display: flex; flex-direction: column; gap: 14px; font: 400 18px/1.6 Jost; max-width: 560px; text-wrap: pretty; }
.parrafos p { margin: 0; }

/* ---------- Portfolio ---------- */
#portfolio { z-index: 3; background: var(--crema) url(/img/papel-crema-2.webp) 0 0 / 512px 512px repeat; }
#portfolio .contenedor { display: flex; flex-direction: column; gap: 56px; }
.ventana { background: #fff; border: 1px solid rgba(107,30,44,.14); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(42,42,42,.18); }
.ventana-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid rgba(107,30,44,.12); background: var(--crema); font: 500 13px/1 'IBM Plex Mono', monospace; }
.carpetas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 780px; padding: 28px 28px 8px; }
.carpeta { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 6px; text-align: center; border-radius: 12px; transition: background .2s, transform .15s ease-out; }
.carpeta:hover, .carpeta[aria-pressed="true"] { background: var(--crema); }
.carpeta:active { transform: scale(.97); }
.carpeta:focus-visible { outline: 2px solid var(--burdeos); outline-offset: 2px; }
.carpeta .icono { position: relative; width: 72px; height: 54px; display: block; }
.carpeta .pestana, .carpeta .cuerpo { position: absolute; background: var(--mantequilla); border: 1.5px solid var(--burdeos); }
.carpeta .pestana { left: 0; top: 0; width: 30px; height: 12px; border-bottom: none; border-radius: 4px 4px 0 0; }
.carpeta .cuerpo { left: 0; top: 10px; right: 0; bottom: 0; border-radius: 0 4px 4px 4px; }
.carpeta[data-cat="todo"] .pestana, .carpeta[data-cat="todo"] .cuerpo { background: #fff; }
.carpeta .nombre { font: 500 14px/1.25 Jost; text-decoration-color: var(--mantequilla); text-decoration-thickness: 5px; text-underline-offset: 3px; }
.carpeta[aria-pressed="true"] .nombre { text-decoration-line: underline; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 40px 28px; padding: 28px 28px 40px; }
.pieza { margin: 0; position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 14px; transition: transform .35s var(--curva); }
.pieza:hover { transform: translateY(-6px); }
.pieza[hidden] { display: none; }
.polaroid { position: relative; background: #fff; padding: 10px; box-shadow: 0 12px 26px rgba(42,42,42,.16); transform: rotate(var(--giro, 0deg)); }
.polaroid .vertical { aspect-ratio: 9/16; background: var(--piedra); }
.cinta { position: absolute; left: 50%; top: 0; width: 120px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateX(-50%) rotate(-4deg); pointer-events: none; }
.pieza figcaption { display: flex; flex-direction: column; gap: 6px; }
.etiqueta { align-self: flex-start; font: 600 11px/1 Jost; letter-spacing: .16em; background: var(--mantequilla); padding: 6px 9px; }
.pieza .titulo { font: 500 16px/1.35 Jost; }

/* ---------- Qué hago ---------- */
#que-hago { z-index: 4; background: var(--crema); }
#que-hago .contenedor { display: flex; flex-direction: column; gap: 48px; }
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.servicio { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: #fff; border-radius: 24px; transition: transform .35s var(--curva), box-shadow .35s; }
.servicio:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(42,42,42,.3); }
.servicio .numero { width: 52px; height: 52px; border-radius: 50%; background: var(--mantequilla); display: flex; align-items: center; justify-content: center; font: 400 30px/1 Oranienbaum; }
.servicio h3 { margin: 0; font: 400 30px/1 Oranienbaum; }
.servicio p { margin: 0; font: 400 16px/1.55 Jost; text-wrap: pretty; }

/* ---------- Equipo ---------- */
#kit { z-index: 5; }
#kit .contenedor { display: flex; flex-direction: column; gap: 56px; }
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.aparato { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 32px; background: var(--crema); color: var(--burdeos); border-radius: 24px; transition: transform .35s var(--curva), box-shadow .35s, background .35s; }
.aparato:hover { transform: translateY(-8px) scale(1.02); background: #fff; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.aparato .imagen { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.aparato .imagen .hueco { background: transparent; }
.aparato .imagen { display: flex; align-items: center; justify-content: center; padding: 8%; }
.aparato .imagen img.media { object-fit: contain; filter: drop-shadow(0 18px 22px rgba(42,42,42,.22)); transition: transform .5s var(--curva); }
.aparato:hover .imagen img.media { transform: translateY(-4px) rotate(-2deg); }
.aparato h3 { margin: 0; font: 400 32px/1 Oranienbaum; text-align: center; }
.aparato p { margin: 0; font: 400 15px/1.45 Jost; text-align: center; max-width: 220px; text-wrap: pretty; }

/* ---------- Contacto ---------- */
#contacto { z-index: 7; overflow: hidden; padding: 110px 28px 90px; }
.marca-agua { position: absolute; left: 0; top: 30px; white-space: nowrap; font: 400 clamp(180px, 26vw, 380px)/1 Oranienbaum; color: rgba(244,239,228,.06); pointer-events: none; will-change: transform; }
#contacto .contenedor { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: start; }
#contacto .texto { display: flex; flex-direction: column; gap: 26px; }
#contacto h2 { margin: 0; display: flex; flex-direction: column; }
#contacto h2 .serif { font-size: clamp(72px, 9vw, 128px); line-height: .84; }
#contacto h2 .script { font-size: clamp(60px, 7.4vw, 108px); line-height: .8; color: var(--mantequilla); margin-left: .9em; }
#contacto .texto > p { margin: 0; max-width: 440px; font: 400 18px/1.6 Jost; text-wrap: pretty; }
.correo-visible { font: 500 15px/1 Jost; }
.bloque-correo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.enlace-tiktok { align-self: flex-start; font: 600 14px/1 Jost; letter-spacing: .12em; text-decoration-color: rgba(244,239,228,.4) !important; }
.tarjeta-form { background: var(--crema); color: var(--burdeos); padding: 34px; border-radius: 20px; }
.tarjeta-form a { color: var(--burdeos); }
.formulario { display: flex; flex-direction: column; gap: 20px; }
.formulario label.campo { display: flex; flex-direction: column; gap: 8px; font: 600 12px/1 Jost; letter-spacing: .16em; }
.formulario input:not([type=checkbox]), .formulario textarea { border: none; border-bottom: 1.5px solid var(--burdeos); background: transparent; padding: 8px 0; font: 500 17px/1.5 Jost; letter-spacing: normal; outline: none; border-radius: 0; }
.formulario input:focus, .formulario textarea:focus { border-bottom-width: 2.5px; }
.formulario textarea { resize: vertical; }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.45 Jost; }
.consentimiento input { margin-top: 3px; accent-color: var(--burdeos); width: 16px; height: 16px; flex: none; }
.boton-enviar { align-self: flex-start; padding: 17px 28px; font-size: 14px; line-height: 1; }
.boton-enviar[disabled] { opacity: .6; cursor: wait; }
.aviso-error { margin: 0; font: 500 14px/1.45 Jost; color: #A3263A; }
.recibido { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.recibido .check { width: 64px; height: 64px; border-radius: 50%; background: var(--mantequilla); display: flex; align-items: center; justify-content: center; font: 700 30px/1 Jost; }
.recibido b { font: 400 44px/1 Oranienbaum; }
.recibido span { font: 400 16px/1.5 Jost; }
.oculto-bot { display: none; }

.pie { position: relative; max-width: 1240px; margin: 100px auto 0; padding-top: 28px; border-top: 1px solid rgba(244,239,228,.35); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie .firma { display: flex; flex-direction: column; align-items: flex-start; }
.pie .firma .serif { font-size: 64px; line-height: .8; }
.pie .firma .script { font-size: 52px; line-height: .6; color: var(--mantequilla); margin: -.2em 0 0 1em; }
.pie .derecha { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font: 500 13px/1 Jost; letter-spacing: .12em; }
.pie .derecha a { text-decoration-color: rgba(244,239,228,.4); }

/* ---------- Página legal ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 72px 28px 110px; font: 400 17px/1.65 Jost; }
.legal h1 { font: 400 clamp(52px, 7vw, 80px)/.9 Oranienbaum; margin: 0 0 28px; }
.legal h2 { font: 400 34px/1.1 Oranienbaum; margin: 44px 0 12px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(107,30,44,.15); }
.legal .volver { display: inline-block; margin-bottom: 36px; font: 600 13px/1 Jost; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Cabecera en móvil: que quepan idioma y botón */
@media (max-width: 560px) {
  .cabecera .usuario { display: none; }
  .nav-derecha { gap: 12px; }
  .nav-derecha .boton-s .flecha { display: none; }
  .nav-derecha .boton-s { white-space: nowrap; }
}

/* Carpetas en móvil: las cinco en una fila, iguales */
@media (max-width: 560px) {
  .carpetas { gap: 2px; padding: 18px 10px 4px; }
  .carpeta { padding: 8px 2px; gap: 8px; }
  .carpeta .icono { width: 48px; height: 36px; }
  .carpeta .pestana { width: 20px; height: 9px; }
  .carpeta .cuerpo { top: 7px; }
  .carpeta .nombre { font-size: 11.5px; }
}