/* polish.css — Web Empatía
   Objetivo:
   - Mejor legibilidad general (contraste suave + tipografía más “nítida”)
   - Sombras y transiciones consistentes (micro, no “app”)
   - Accesibilidad: focus visible + reduce motion
   - Unificación visual: solo los “paneles” (hero/pageHero) se sienten como card
*/

:root{
  /* Un pelín más de contraste en texto secundario (se nota en LCD y móvil) */
  --text-muted: #526071;
  --muted: var(--text-muted);

  /* Sombras: coherentes y un poco más “crisp” */
  --shadow-surface: 0 1px 2px rgba(15,23,42,.07), 0 10px 28px rgba(15,23,42,.07);
  --shadow-float:   0 3px 10px rgba(15,23,42,.10), 0 22px 54px rgba(15,23,42,.12);

  /* Aro de foco */
  --focus-ring: rgba(243, 181, 98, 0.60);
  --focus-ring-soft: rgba(243, 181, 98, 0.22);

  /* Duraciones “calmas” */
  --t-fast: 140ms;
  --t-med:  200ms;
}

/* Tipografía: más nitidez y ritmo */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans",
               Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   PANELES (solo donde toca)
   - PageHero/Hero sí tienen lenguaje “card”
   - Las secciones normales NO lo son por defecto
   ========================================================= */

:where(.hero, .pageHero, .page-hero){
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-surface);
  border-radius: var(--radius-md);
}

/* Las secciones normales NO son tarjetas por defecto */
:where(main section){
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* =========================================================
   TRANSICIONES coherentes
   ========================================================= */

:where(.card, .card-link, .btn, .hero, .pageHero, .page-hero, main section){
  transition:
    transform var(--t-med) ease,
    box-shadow var(--t-med) ease,
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    filter var(--t-fast) ease;
}

/* Inputs: foco suave */
:where(input, textarea){
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

/* =========================================================
   WhatsApp CTA (más pro, integrado y consistente)
   ========================================================= */

.btn__icon{
  display: inline-flex;
  align-items: center;
}
.btn__icon svg{
  display: block;
}

a.btn.btn--whatsapp,
.btn.btn--whatsapp{
  background: transparent !important;
  border-color: rgba(37, 211, 102, 0.45) !important;
  color: rgba(26, 165, 82, 0.98) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

a.btn.btn--whatsapp:hover,
.btn.btn--whatsapp:hover{
  background: rgba(37, 211, 102, 0.10) !important;
  border-color: rgba(37, 211, 102, 0.55) !important;
}

.btn.btn--whatsapp .waIcon{
  color: currentColor;
}

/* =========================================================
   Interacción
   ========================================================= */

@media (hover: hover) and (pointer: fine){
  /* Tarjetas clickables: lift sutil + sombra (evitamos aplicarlo al hero) */
  :where(.card, .card-link):hover{
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
  }

  /* Botones: sin lift (solo feedback visual) */
  .btn:hover{
    transform: none;
    filter: none;
  }
}

/* “Pressed” (touch y desktop): respuesta clara al toque/clic */
.btn:active{
  transform: none;
  filter: brightness(0.98);
}
.card-link:active{
  transform: translateY(1px);
}

/* Táctil: evitamos hover pegajoso */
@media (hover: none){
  :where(

*, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   CLICKABILITY — señales claras en móvil (v0.2)
   ========================================================= */

.card-link{
  position:relative;
  padding-right:2.6rem;
  border:1px solid rgba(15, 23, 42, 0.10);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Chevron (no requiere tocar HTML) */
.card-link::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  line-height:1;
  opacity:.42;
  transition:transform var(--t-med) ease, opacity var(--t-med) ease;
}

@media (hover:hover){
  .card-link:hover::after{
    opacity:.85;
    transform:translate(2px,-50%);
  }
}

/* Feedback táctil visible */
.card-link:active{
  transform:translateY(0);
  background-color: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .card-link:active{
    background-color: rgb(var(--accent-rgb) / 0.06);
  }
}

.card-link:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

/* Chips / Motivos */
.chips a{
  position:relative;
  padding-right:1.05rem;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.chips a::after{
  content:"›";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
  opacity:.38;
  transition:transform var(--t-med) ease, opacity var(--t-med) ease;
}

@media (hover:hover){
  .chips a:hover::after{
    opacity:.75;
    transform:translate(2px,-50%);
  }
}

.chips a:active{
  background-color: color-mix(in srgb, var(--bg-surface) 90%, var(--accent-warm) 10%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent-warm) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .chips a:active{
    background-color: rgb(var(--accent-warm-rgb) / 0.08);
  }
}

.chips a:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

/* ===========================================
   Micro-interacciones (sutiles)
   - Objetivo: sensación “premium” sin distraer
   - Respeta prefers-reduced-motion
=========================================== */

/* Estados de foco visibles y consistentes */
:where(a, button, input, textarea, select, summary):focus-visible{
  outline: 2px solid rgba(var(--accent-rgb) / 0.38);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Solo animamos elementos realmente clicables */
a.card,
a.modalityCard,
.card-link{
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  text-decoration: none;
}

@media (hover:hover){
  a.card:hover,
  a.modalityCard:hover,
  .card-link:hover{
    transform: translateY(-2px);
    border-color: rgba(148,163,184,0.65);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.70) inset,
      0 14px 34px rgba(15,23,42,0.12);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  a.card,
  a.modalityCard,
  .card-link{ transform:none !important; }
}