/*
Theme Name: Hope Salads
Theme URI: https://iiced.online
Author: Instituto de Innovación y Certificación Digital - IICED
Author URI: https://iiced.online
Description: Tema de WordPress creado a partir de la landing page de Hope Salads (v2.0 Híbrido).
Version: 2.2.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: hope-salads
Domain Path: /languages
*/

:root {
  --hope-primary: #11522F;
  --hope-secondary: #8BB93E;
  --hope-cta: #E31A22;
  --hope-ocre: #EBA315;
  --card-radius: 20px;
  --surface: #ffffff;
  --paper: #f6f8f5;
  --hairline: #e7ece6;
  --ink: #16271e;
  --muted: #5d6b62;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Open Sans", sans-serif; }
body { overflow-x: hidden; }
h1,h2,h3,h4,h5 { font-family: "Montserrat", sans-serif; }
::selection { background: color-mix(in oklab, var(--hope-secondary) 40%, white); }

.card-shadow { box-shadow: 0 1px 2px rgba(16,40,28,.04), 0 10px 30px -18px rgba(16,40,28,.25); }
.card-shadow-hover { box-shadow: 0 2px 6px rgba(16,40,28,.06), 0 26px 48px -24px rgba(16,40,28,.45); }

/* Scroll reveal — visible by default; the hidden "pre" state is added by JS */
.reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.pre { transform: translateY(22px); }
.reveal.on { opacity: 1; transform: translateY(0); }

/* Hero entrance */
@keyframes hopeRise { from { transform: translateY(16px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hope-rise { animation: hopeRise .6s ease forwards; }
  .hope-rise-2 { animation: hopeRise .6s .12s ease forwards; }
  .hope-rise-3 { animation: hopeRise .6s .24s ease forwards; }
}

/* CTA comandero — sheen sweep + arrow nudge */
.cta-launch { position: relative; overflow: hidden; isolation: isolate; }
.cta-launch::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .cta-launch::after { animation: sheen 4.5s ease-in-out infinite; }
  @keyframes sheen { 0%, 55% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
}
.cta-launch .cta-arrow { transition: transform .25s ease; }
.cta-launch:hover .cta-arrow { transform: translateX(6px); }
.cta-launch:hover .cta-plate { transform: scale(1.04) rotate(2deg); }
.cta-plate { transition: transform .5s cubic-bezier(.22,.61,.36,1); }

.salad-card { transition: transform .3s ease, box-shadow .3s ease; }
.salad-card:hover { transform: translateY(-5px); }
.salad-card:hover img { transform: scale(1.06); }
.salad-card img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }

.step-num { font-variant-numeric: tabular-nums; }

/* Custom mobile nav styles for WordPress menu integration */
#mobile-nav nav a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  transition: background-color 0.2s, color 0.2s;
  color: var(--ink);
}
#mobile-nav nav a:hover {
  background-color: var(--paper);
}

/* ============ ACCESSIBILITY (a11y) ============ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    position: absolute;
    top: 5px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
}

.skip-link {
    transition: top 0.15s ease-out;
}