/* ─────────────────────────────────────────────────────────────────────────
   patch.css — utilidades Tailwind usadas en el HTML pero ausentes de
   css/bundle.css (compilado del proyecto React original).
   Cargar SIEMPRE después de bundle.css. No editar bundle.css: añadir aquí.
   Auditoría: julio 2026.
   ───────────────────────────────────────────────────────────────────────── */

/* Recortes de esquina proporcionales para elementos pequeños.
   Los .corner-cut-1/2/3 del bundle cortan 40px (20px el -3): correcto en
   tarjetas grandes, pero en chips y cajas de iconos (~32-56px) se comen el
   contenido. Estas variantes cortan solo la esquina. */
.corner-cut-sm-1{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.corner-cut-sm-2{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.corner-cut-sm-3{clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.corner-cut-md-1{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.corner-cut-md-2{clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}

/* Posicionamiento */
.bottom-6{bottom:1.5rem}
.bottom-24{bottom:6rem}
.-bottom-6{bottom:-1.5rem}
.-right-6{right:-1.5rem}
.top-3{top:.75rem}
.top-10{top:2.5rem}
.top-\[25\%\]{top:25%}
.bottom-\[20\%\]{bottom:20%}
.left-\[10\%\]{left:10%}
.right-\[15\%\]{right:15%}

/* Dimensiones */
.max-w-3xl{max-width:48rem}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[70vh\]{min-height:70vh}
.h-\[40vw\]{height:40vw}
.w-\[40vw\]{width:40vw}
.aspect-\[4\/3\]{aspect-ratio:4/3}

/* Márgenes y padding */
.mb-10{margin-bottom:2.5rem}
.mb-24{margin-bottom:6rem}
.mt-6{margin-top:1.5rem}
.mt-12{margin-top:3rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.pb-6{padding-bottom:1.5rem}
.pl-6{padding-left:1.5rem}
.pr-10{padding-right:2.5rem}
.pt-6{padding-top:1.5rem}
.pt-12{padding-top:3rem}
.pt-28{padding-top:7rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0{padding-top:0;padding-bottom:0}
.py-40{padding-top:10rem;padding-bottom:10rem}

/* Espaciado entre hijos */
.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}
.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}

/* Colores */
.bg-\[\#081208\]\/98{background-color:rgb(8 18 8 / .98)}
.bg-\[\#25D366\]{background-color:#25d366}
.border-\[\#081208\]{border-color:#081208}
.border-\[\#84cc16\]\/20{border-color:rgb(132 204 22 / .2)}
.border-\[\#84cc16\]\/30{border-color:rgb(132 204 22 / .3)}
.text-\[\#081208\]\/80{color:rgb(8 18 8 / .8)}
.text-\[\#22c55e\]\/20{color:rgb(34 197 94 / .2)}
.text-\[\#84cc16\]\/20{color:rgb(132 204 22 / .2)}
.text-white\/20{color:rgb(255 255 255 / .2)}
.accent-\[\#22c55e\]{accent-color:#22c55e}

/* Tipografía */
.text-\[10px\]{font-size:10px}
.leading-\[0\.9\]{line-height:.9}
.tracking-wide{letter-spacing:.025em}
.italic{font-style:italic}
.not-italic{font-style:normal}
.underline{text-decoration-line:underline}
.list-decimal{list-style-type:decimal}
.list-inside{list-style-position:inside}

/* Bordes y misc */
.border-l-4{border-left-width:4px}
.rounded{border-radius:.25rem}
.order-1{order:1}
.order-2{order:2}

/* Transformaciones (composición estándar Tailwind v3) */
.translate-x-3{--tw-translate-x:.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.translate-y-3{--tw-translate-y:.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:-translate-x-1:hover{--tw-translate-x:-.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:-translate-y-0\.5:hover{--tw-translate-y:-.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

/* Estados hover / open / group */
.hover\:bg-transparent:hover{background-color:transparent}
.hover\:text-white:hover{color:#fff}
.hover\:text-\[\#081208\]:hover{color:#081208}
.group:hover .group-hover\:text-white{color:#fff}
.open\:border-\[\#22c55e\][open]{border-color:#22c55e}
.hover\:shadow-\[6px_6px_0_\#22c55e\]:hover{--tw-shadow:6px 6px 0 #22c55e;--tw-shadow-colored:6px 6px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}
.hover\:shadow-\[6px_6px_0_\#84cc16\]:hover{--tw-shadow:6px 6px 0 #84cc16;--tw-shadow-colored:6px 6px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

/* Móvil: botones brutalistas más compactos para pantallas angostas */
@media (max-width:639px){
  .btn-brutal,.btn-brutal-outline{font-size:.875rem;padding:.875rem 1.25rem;gap:.5rem}
}

/* Breakpoints */
@media (min-width:640px){
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-8xl{font-size:6rem;line-height:1}
  .sm\:w-auto{width:auto}
}
@media (min-width:768px){
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
}
@media (min-width:1024px){
  .lg\:mb-6{margin-bottom:1.5rem}
  .lg\:mt-10{margin-top:2.5rem}
  .lg\:text-left{text-align:left}
  .lg\:w-1\/2{width:50%}
  .lg\:leading-\[0\.9\]{line-height:.9}
}
@media (min-width:1280px){
  .xl\:mt-20{margin-top:5rem}
  .xl\:w-5\/12{width:41.666667%}
}

/* ─── Accesibilidad ─────────────────────────────────────────────────────── */

/* Contraste WCAG AA: sobre los fondos oscuros (#081208 / #0d1f0d) las
   opacidades originales no llegan al ratio 4.5:1 para texto; se elevan.
   .text-white\/20 se usa en los separadores "/" de las migas de pan:
   esta regla sustituye a la utilidad definida más arriba (misma
   especificidad, gana la última). */
.text-white\/40{color:rgba(255,255,255,.55)}
.text-white\/30{color:rgba(255,255,255,.5)}
.text-white\/20{color:rgba(255,255,255,.5)}

/* Skip link: enlace "Saltar al contenido" (href="#main"), oculto fuera de
   pantalla hasta que recibe el foco por teclado. */
.skip-link{position:fixed;top:-100px;left:16px;z-index:9999;background:#22c55e;color:#081208;font-weight:700;padding:12px 20px;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:16px}

/* Movimiento reducido: anula animaciones y transiciones cuando el usuario
   lo prefiere a nivel de sistema. animations.js también se desactiva. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Reglas globales antes duplicadas en bloques <style> inline de cada página
   (centralizadas aquí en la fase 4; los bloques inline se eliminaron). */
html,body{overflow-x:hidden;width:100%;max-width:100%}
img{max-width:100%;height:auto}

/* Tipografía fluida del h1 del hero en móvil (las media queries de tablet/
   desktop ya están en bundle.css). */
@media(max-width:639px){h1.hero-h1{font-size:clamp(2.4rem,12.5vw,3.6rem)!important;line-height:.95!important}}

/* Animación de apertura de los <details> del FAQ (antes inline en cada página).
   Solo aplica dentro de contenedores con clase .faq. */
.faq details[open] summary ~ *{animation:faq-open .3s ease}
@keyframes faq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}