/* =============================================================
   PARDIA — COMPONENTES DE PORTAFOLIO Y TESTIMONIOS
   Los cargan la portada, /proyectos y /opinar. Solo componentes
   nuevos: los tokens y la base viven en el <style> de index.html
   y, para las páginas sueltas, en base.css.
   ============================================================= */

/* `hidden` tiene que ganarle a los display de los componentes: la regla del
   navegador ([hidden]{display:none}) pierde contra cualquier `display` de autor,
   así que un .btn o una rejilla marcados como ocultos se verían igual. */
[hidden]{display:none !important}

/* Texto solo para lectores de pantalla: fuera de la vista pero dentro del árbol de
   accesibilidad (display:none lo borraría también para ellos). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Estrellas (solo lectura) ---------------------------------
   Un solo elemento con aria-label: un lector de pantalla dice
   "4 de 5 estrellas", no "estrella estrella estrella estrella". */
.stars{
  display:inline-flex;gap:2px;font-size:1rem;line-height:1;
  color:var(--gold-deep);letter-spacing:.06em;
}
.stars .off{color:var(--line)}

/* --- Tarjeta de testimonio ----------------------------------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.testimonial:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.testimonial blockquote{
  color:var(--ink);font-size:1rem;font-weight:500;line-height:1.65;
  /* Las comillas las pone el CSS, no el texto: el comentario del cliente se
     inserta escapado y sin decoraciones añadidas. */
  quotes:'\201C' '\201D';
}
.testimonial blockquote::before{content:open-quote}
.testimonial blockquote::after{content:close-quote}
.testimonial .who{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.testimonial .who .name{font-weight:700;font-size:.98rem}
.testimonial .who .role{font-size:.85rem;color:var(--muted-soft);font-weight:600}
.testimonial .who .proj-ref{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-deep);margin-top:6px;
}

/* Enlace dentro del pie: sin esto quedaría idéntico al texto de al lado y nadie
   sabría que se puede pulsar. */
/* --teal sobre --bg se queda en 2.9:1. El hover mantiene su señal por el subrayado. */
.foot-meta a{color:var(--teal-deep);font-weight:700}  /* 4.52:1 */
.foot-meta a:hover{color:var(--ink);text-decoration:underline}

/* --- Enlace del proyecto dentro de su tarjeta ----------------
   `margin-top:auto` lo empuja al pie aunque los resúmenes tengan
   distinta longitud, así todas las tarjetas alinean su enlace. */
.proj-link{
  margin-top:auto;padding-top:6px;
  font-size:.88rem;font-weight:700;color:var(--teal-deep);
  display:inline-flex;align-items:center;align-self:flex-start;
  border-bottom:1.5px solid transparent;transition:border-color .25s,color .25s;
}
.proj-link:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* --- Enlace "ver todos" bajo una rejilla --------------------- */
.more-link{display:flex;justify-content:center;margin-top:34px}

@media(max-width:920px){ .testimonials{grid-template-columns:repeat(2,1fr)} }
@media(max-width:660px){ .testimonials{grid-template-columns:1fr} }

/* =============================================================
   PÁGINA PUENTE (/whatsapp)
   Existe para durar un segundo: todo centrado, sin nav ni pie que
   distraigan, y el número con el mayor peso visual de la página
   porque es lo que hay que retener si el salto falla.
   ============================================================= */
.puente{max-width:44ch;margin:0 auto;padding:16vh 0 60px;text-align:center}
.puente-logo{display:block;margin-bottom:34px}
.puente-logo img{height:36px;width:auto;margin:0 auto}
.puente-estado{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);font-weight:600;font-size:.95rem;margin-bottom:18px;
}
.puente-spinner{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line);border-top-color:var(--teal);
  animation:puenteGira .8s linear infinite;
}
@keyframes puenteGira{to{transform:rotate(360deg)}}
.puente-numero{margin-bottom:26px}
.puente-numero a{
  font-size:clamp(1.9rem,6vw,2.6rem);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);border-bottom:3px solid var(--teal);padding-bottom:2px;
}
.puente-numero a:hover{color:var(--teal-deep)}
.puente-ayuda{color:var(--muted-soft);font-size:.92rem;font-weight:500;margin-bottom:10px}
.puente-ayuda a{color:var(--teal-deep);font-weight:700}
.puente-ayuda a:hover{text-decoration:underline}
.puente-volver{margin-top:40px;font-size:.88rem}
.puente-volver a{color:var(--muted-soft);font-weight:600}
.puente-volver a:hover{color:var(--ink)}

/* =============================================================
   PÁGINA 404
   Centrada y corta: quien llega aquí se equivocó de dirección y
   lo que necesita es una salida, no una disculpa larga.
   ============================================================= */
.error-404{max-width:56ch;margin:0 auto;padding:170px 0 110px;text-align:center}
.error-404 .eyebrow{justify-content:center}
.error-404 h1{font-size:clamp(2rem,5vw,3.1rem);margin:18px 0 14px}
.error-404 .lead{color:var(--muted);font-size:1.1rem;font-weight:500;margin-bottom:38px}
.error-404-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.error-404-ayuda{margin-top:44px;color:var(--muted-soft);font-size:.92rem;font-weight:500}
.error-404-ayuda a{color:var(--teal-deep);font-weight:700}
.error-404-ayuda a:hover{text-decoration:underline}

@media(max-width:660px){ .error-404{padding:130px 0 80px} }

/* =============================================================
   DOCUMENTO LEGAL (aviso de privacidad)
   Texto largo para leer, no para escanear: medida corta, interlínea
   amplia y jerarquía clara. El INAI pide lenguaje comprensible, así
   que la tipografía acompaña esa intención en vez de estorbarla.
   ============================================================= */
.legal{max-width:70ch;margin:0 auto;padding:140px 0 80px}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin:16px 0 10px}
.legal .actualizado{color:var(--muted-soft);font-size:.9rem;font-weight:600;margin-bottom:38px}
.legal h2{
  font-size:1.35rem;margin:44px 0 14px;padding-top:26px;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal h3{font-size:1.05rem;margin:26px 0 8px;color:var(--teal-deep)}
.legal p{margin-bottom:14px;color:var(--ink)}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:8px;color:var(--ink)}
.legal strong{font-weight:700}
.legal a{color:var(--teal-deep);font-weight:700;border-bottom:1px solid transparent}
.legal a:hover{border-bottom-color:var(--teal-deep)}
.legal .nota{
  background:var(--bg-2);border-left:3px solid var(--teal);
  padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0;
}
.legal .nota p:last-child{margin-bottom:0}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.94rem}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-weight:700;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.legal .tabla-scroll{overflow-x:auto}

@media(max-width:660px){ .legal{padding:110px 0 60px} }

/* =============================================================
   FORMULARIO DE TESTIMONIO (/opinar)
   ============================================================= */
.opinar{max-width:660px;margin:0 auto;padding:130px 0 80px}
.opinar-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px;box-shadow:var(--shadow);
}
.opinar h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin:16px 0 10px}
.opinar .lead{color:var(--muted);margin-bottom:30px;font-weight:500}

.opinar fieldset{border:none;margin-bottom:20px}
.opinar legend{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.opinar .field{margin-bottom:20px}
.opinar .field label{
  display:block;font-size:.85rem;font-weight:700;color:var(--ink);
  margin-bottom:8px;letter-spacing:.01em;
}
.opinar .field .hint{display:block;font-weight:500;color:var(--muted-soft);font-size:.8rem;margin-top:3px}
.opinar .field input[type="text"],
.opinar .field textarea{
  width:100%;padding:13px 16px;border-radius:12px;
  background:var(--bg);border:1.5px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:.98rem;font-weight:500;
  transition:border-color .25s,background .25s;
}
.opinar .field input[type="text"]:focus,
.opinar .field textarea:focus{outline:none;border-color:var(--teal);background:var(--surface)}
.opinar .field textarea{resize:vertical;min-height:130px}

/* --- Selector de estrellas -----------------------------------
   Radios reales: funciona con teclado (flechas), con lector de
   pantalla y sin JavaScript. El input se oculta visualmente pero
   NO con display:none, que lo sacaría del orden de foco.

   Las estrellas van en el DOM de 5 a 1 y se invierten con
   row-reverse: así se ven 1..5 de izquierda a derecha, y el
   selector `~` puede pintar "esta y las de menor valor" (que
   quedan a su izquierda) sin nada de JavaScript. */
.stars-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.stars-input input{position:absolute;opacity:0;width:1px;height:1px}
.stars-input label{
  font-size:2rem;line-height:1;cursor:pointer;color:var(--line);margin:0;
  transition:color .2s,transform .2s var(--ease);
}
.stars-input input:checked ~ label{color:var(--gold)}
/* Al pasar el ratón, la previsualización manda sobre lo ya marcado: se apaga la
   selección y se pinta solo hasta donde apunta el cursor. */
.stars-input:hover input:checked ~ label{color:var(--line)}
.stars-input label:hover,
.stars-input label:hover ~ label{color:var(--gold)}
.stars-input label:hover{transform:scale(1.12)}
.stars-input input:focus-visible + label{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}

/* --- Consentimiento ------------------------------------------ */
.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0 6px}
.consent input[type="checkbox"]{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--teal);cursor:pointer;
}
.consent label{font-size:.88rem;color:var(--muted);font-weight:500;line-height:1.55;cursor:pointer}

/* El formulario de contacto va sobre la sección oscura, así que su nota legal no
   puede heredar los colores pensados para fondo claro. */
.form-legal{font-size:.8rem;color:rgba(255,255,255,.55);text-align:center;margin-top:12px;font-weight:500}
.form-legal a{color:rgba(255,255,255,.85);font-weight:700;text-decoration:underline}
.form-legal a:hover{color:#fff}

.consent-nota{font-size:.82rem;color:var(--muted-soft);margin:-2px 0 0 32px;font-weight:500}
.consent-nota a{color:var(--teal-deep);font-weight:700}

.opinar .btn-primary{width:100%;justify-content:center;margin-top:18px}
.opinar .form-status{margin-top:16px;font-size:.94rem;font-weight:600;text-align:center;min-height:22px}
.opinar .form-status.ok{color:var(--teal-deep)}
.opinar .form-status.err{color:#c0432c}

/* Estado de la página cuando el enlace ya no sirve o hubo un problema. */
.opinar-aviso{text-align:center;padding:20px 0}
.opinar-aviso h1{margin-bottom:12px}
.opinar-aviso p{color:var(--muted);margin-bottom:26px;font-weight:500}

@media(max-width:660px){
  .opinar{padding:110px 0 60px}
  .opinar-card{padding:26px 22px}
  .stars-input label{font-size:1.75rem}
}