/* Hallmark · shape: Conversational FAQ (draw fb8fc0; las frases de la marca se quedan como titulares) · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.3% 0.006 100) · accent: oklch(51.2% 0.079 131) · display: Barlow 900 · body: Barlow 400/600 · hero: Corridor · nav: search-led bar · footer: letter close · signature: el aviso «Hora de regar» que se toca en el héroe
 * axes: light/display-heavy/chromatic-green · posture: Committed (salvia y bosque en bandas; el verde de la app como señal) · contrast: pass · fold: pass · job: try · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, una app de recordatorios no discute mucho; la frase «Lo difícil es acordarse» y la tabla verano/invierno hacen de argumento */
/* Hallmark · hero-review: no separada, incluida en la revisión final · finish-review: subagent · 6 findings · 6 resolved · gap: none */
/* Hallmark · waive 47b · una sola pantalla real recortada con el radio del móvil, sin marco dibujado · las capturas son de la app Riega */
/* Hallmark · waive 49b · una frase real que no se puede acortar, dos líneas como mucho · «política de privacidad» es un enlace dentro de la respuesta sobre los datos y parte línea con su frase */
/* Hallmark · dismissed 58 · las respuestas de las preguntas van cerradas en <details> y los textos del selector de pantallas se ocultan con :has; la frase del héroe (13 palabras) es la del dueño */
/* Hallmark · dismissed 23 · la firma «Riega» del pie va en el verde de la app, el de su icono: es la marca, no un énfasis */
/* Hallmark · answered F7 · los chips de toxicidad, las pestañas y los filtros son píldoras como en la app */
/* Hallmark · dropped Así de simple, Busca tu planta, Elige la hora, Toca «Regada», 09:30 · los tres pasos con su reloj de ejemplo; sus hechos van en la frase del héroe, en la pestaña «Busca tu planta» y en el aviso que se toca */
/* Hallmark · dropped Gratis, Riega+ · ya no son títulos h3: son las cabeceras de columna de la tabla de planes */
/* Hallmark · dropped i-drop, i-reloj, pasos-title · ningún script ni enlace los usa */
/* Hallmark · dropped la cinta de especies, las cifras 1, 184 y 2 y la polaroid del héroe · decoración y cifras derivadas; 184 sigue en el titular del catálogo */

/* ── Ritmo de secciones ── */
.sec { padding-block: var(--section-gap); }
.sec h2 { margin-bottom: var(--space-lg); }

/* ── 1. Héroe (Corridor): columna centrada y la pantalla «Hoy» que sube desde abajo ── */
.hero { position: relative; }
.corridor { display: grid; justify-items: center; padding-top: var(--space-xl); text-align: center; }
.intro { display: grid; justify-items: center; gap: var(--space-lg); }
.hero h1 { max-width: 11em; font-size: clamp(2.75rem, 3.4vw + 1rem, 5.25rem); line-height: 0.96; }
.hero .lead { max-width: 46ch; }
.hero .stores { justify-content: center; }
.hero-stage { position: relative; width: 100%; margin-top: var(--space-xl); }
/* La superficie salvia sobre la que se apoya el móvil */
.hero-stage::before { content: ""; position: absolute; inset: 96px 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-paper-2); }
.screen { margin: 0; border-radius: 34px; box-shadow: var(--shadow-card); background: var(--color-surface); }
.screen > img { border-radius: inherit; }
/* Recorte en el hueco entre la primera y la segunda tarjeta de la captura (y = 712 de 1206) */
.screen--hoy { position: relative; z-index: var(--z-base); width: min(320px, 78vw); margin-inline: auto; aspect-ratio: 560 / 712; border-radius: 36px 36px 0 0; }
.screen--hoy > img { object-position: top; }

/* La notificación de ejemplo (firma de la página): se puede marcar «Regada» */
.noti-wrap { position: absolute; z-index: var(--z-raised); top: 72px; left: calc(50% + 184px); width: 300px; text-align: left; }
.noti { padding: var(--space-md); border-radius: 20px; background: var(--color-surface); box-shadow: var(--shadow-card); }
.noti-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.noti-icon { width: 20px; height: 20px; border-radius: 6px; }
.noti-title { display: flex; align-items: center; gap: var(--space-xs); font-weight: 600; font-size: var(--text-md); }
.noti-body { margin-top: var(--space-3xs); color: var(--color-ink-2); }
.noti-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xs); margin-left: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); border-radius: var(--radius-pill); color: var(--color-accent); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.noti-btn:hover { background: var(--color-paper-2); }
.noti-btn:active { background: var(--color-paper-3); }
.noti-check:focus-visible ~ .noti .noti-btn { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.noti-ok { width: 20px; height: 20px; color: var(--color-accent); }
.noti-done { display: none; }
.noti-check:checked ~ .noti .noti-pending { display: none; }
.noti-check:checked ~ .noti .noti-done { display: flex; align-items: center; justify-content: space-between; animation: noti-in var(--dur-long) var(--ease-out); }
.noti-check:checked ~ .noti .noti-btn--undo { margin: 0; color: var(--color-ink-2); }
.noti-hint { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
@keyframes noti-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .noti-check:checked ~ .noti .noti-done { animation: none; } }

@media (max-width: 60rem) {
  .hero-stage { padding-bottom: var(--space-lg); }
  .noti-wrap { position: relative; top: auto; left: auto; width: min(320px, calc(100% - 2 * var(--space-md))); margin: calc(-1 * var(--space-3xl)) auto 0; }
}

/* ── 2. La frase y el ritmo por estación ── */
.sec--ritmo { padding-top: var(--section-gap-l); }
.statement { max-width: 18ch; font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem); line-height: 0.98; margin-bottom: var(--space-3xl); }
.ritmo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: end; }
.ritmo-lead { max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.ritmo-t { width: 100%; border-collapse: collapse; }
.ritmo-t th, .ritmo-t td { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.ritmo-t thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.ritmo-t tbody th { padding-right: var(--space-lg); font-size: var(--text-title); font-weight: 600; line-height: 1.2; }
.ritmo-t td { font-size: var(--text-md); color: var(--color-ink-2); white-space: nowrap; }
.ritmo-t td .num { margin-right: var(--space-2xs); font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 900; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); }
.ritmo-t td + td .num { color: var(--color-niebla-ink); }
@media (max-width: 60rem) {
  .ritmo { grid-template-columns: minmax(0, 1fr); }
  .ritmo-t tbody th { font-size: var(--text-md); }
}

/* ── 3. La app por dentro: selector de pantallas ── */
.sec--app { padding-top: var(--section-gap-s); }
.app-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl) var(--gap-columns); align-items: center; }
.app-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); justify-items: start; min-width: 0; }
.app-copy h2 { margin-bottom: 0; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); min-inline-size: 0; margin: var(--space-xs) 0 0; padding: 0; border: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg label:hover { border-color: var(--color-ink-2); }
.seg label:active { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.app-texts p { max-width: 45ch; font-size: var(--text-lead); line-height: 1.45; }
.app-screens { display: grid; place-items: center; padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-3); }
.app-screens .screen { grid-area: 1 / 1; width: min(360px, 100%); aspect-ratio: 540 / 1163; }
/* Sin :has() se ven todas las pantallas y todos los textos, uno detrás de otro */
@supports selector(:has(*)) {
  .sec--app:has(#p-busca:checked) [data-p]:not([data-p="busca"]),
  .sec--app:has(#p-ficha:checked) [data-p]:not([data-p="ficha"]),
  .sec--app:has(#p-zonas:checked) [data-p]:not([data-p="zonas"]),
  .sec--app:has(#p-calendario:checked) [data-p]:not([data-p="calendario"]),
  .sec--app:has(#p-vacaciones:checked) [data-p]:not([data-p="vacaciones"]) { display: none; }
  .sec--app [data-p] { animation: pantalla-in var(--dur-long) var(--ease-out); }
}
@supports not selector(:has(*)) { .app-screens { grid-auto-flow: column; overflow-x: auto; } .app-screens .screen { grid-area: auto; } }
@keyframes pantalla-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sec--app [data-p] { animation: none; } }
@media (max-width: 60rem) {
  .app-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .seg { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2xs) var(--gutter); scrollbar-width: none; width: calc(100% + 2 * var(--gutter)); }
  .app-screens { padding: var(--space-xl) var(--space-md); }
  .app-screens .screen { width: min(300px, 100%); }
}

/* ── 4. Catálogo: buscador grande y tira de fichas ── */
.sec--cat { background: var(--color-paper-3); }
.cat-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.cat-head h2 { margin-bottom: 0; }
.cat-head .lead { grid-column: 1; }
.find { grid-column: 2; grid-row: 1 / span 2; align-self: end; position: relative; display: flex; align-items: center; gap: var(--space-xs); width: 100%; max-width: 32rem; margin-left: auto; padding: var(--space-xs); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-salvia); transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.find:focus-within { box-shadow: 3px 3px 0 var(--color-salvia); transform: translate(3px, 3px); }
.find-ico { width: 24px; height: 24px; flex: none; margin-left: var(--space-sm); color: var(--color-accent); }
.find input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-xs); border: 0; background: transparent; color: var(--color-ink); font-size: var(--text-lg); outline: none; }
.find input::placeholder { color: var(--color-ink-2); opacity: 1; }
.find:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.find-go { min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.find-go:hover { background: var(--color-accent-2); }
.find-go:active { transform: translateY(1px); }
.find-go:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .find:focus-within { transform: none; } }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 19%); gap: var(--gap-columns); margin: 0 0 var(--space-xl); padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2)) var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); overscroll-behavior-x: contain; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.card a { display: grid; height: 100%; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); text-decoration: none; overflow: clip; transition: transform var(--dur-short) var(--ease-out); }
.card a:hover { transform: translateY(-4px); }
.card a:active { transform: translateY(-1px); }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.card-body { display: grid; gap: var(--space-2xs); justify-items: start; padding: var(--space-md) var(--space-md) var(--space-lg); }
.card-name { font-size: var(--text-title); font-weight: 900; letter-spacing: -0.01em; line-height: 1.15; }
.card-water { margin-bottom: var(--space-xs); color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .cat-head { grid-template-columns: minmax(0, 1fr); }
  .find { grid-column: 1; grid-row: auto; margin-left: 0; }
  .rail { grid-auto-columns: minmax(13rem, 62%); }
}

/* ── 5. Mascotas (banda bosque) ── */
.sec--tox { background: var(--color-bosque); color: var(--color-on-dark); }
.sec--tox :focus-visible { outline-color: var(--color-focus-on-dark); }
.tox-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.tox-copy { display: grid; gap: var(--space-md); justify-items: start; }
.tox-copy h2 { margin-bottom: var(--space-xs); }
.tox-copy p { max-width: 45ch; color: var(--color-on-dark-2); }
.tox-copy .tox-voice { font-size: var(--text-lead); font-weight: 600; color: var(--color-on-dark); }
.pets { display: flex; gap: var(--space-sm); color: var(--color-salvia); }
.pets svg { width: 56px; height: 56px; }
.tox-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-on-dark-rule); }
.tox-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-on-dark-rule); }
.tox-plant { font-size: var(--text-title); font-weight: 900; letter-spacing: -0.01em; }
.tox-list .tox { grid-column: 2; grid-row: 1 / span 2; }
.tox-src { font-size: var(--text-sm); color: var(--color-on-dark-2); }
.tox-src a { color: var(--color-on-dark); }
.tox-src a:hover { color: var(--color-salvia); }
@media (max-width: 60rem) { .tox-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 6. Planes: tabla ── */
.sec--planes h2 { margin-bottom: var(--space-2xl); }
.plans { width: 100%; border-collapse: collapse; }
.plans th, .plans td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); text-align: left; }
.plans thead th, .plans thead td { padding-top: 0; padding-bottom: var(--space-lg); vertical-align: bottom; border-bottom: 2px solid var(--color-ink); }
.plans thead th { width: 28%; }
.plan-name { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); letter-spacing: -0.015em; line-height: 1.1; }
.plan-tag { display: block; margin-top: var(--space-2xs); font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2); }
.plans tbody th { padding-left: 0; font-weight: 400; }
.plans td svg { width: 24px; height: 24px; color: var(--color-accent); }
.plans .plan-plus { background: var(--color-paper-2); }
.plans thead .plan-plus { border-radius: var(--radius-card) var(--radius-card) 0 0; padding-top: var(--space-lg); }
.plans .plus-row th, .plans .plus-row td { border-top: 1px solid var(--color-ink-2); }
.plans-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--gap-columns); margin-top: var(--space-xl); }
.plan-note { max-width: 52ch; font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 40rem) {
  .plans th, .plans td { padding-inline: var(--space-xs); }
  .plans thead th { width: auto; }
  .plan-name { font-size: var(--text-xl); }
  .plan-tag { display: none; }
}

/* ── 7. Preguntas ── */
.sec--faq { padding-top: var(--section-gap-s); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.faq-grid h2 { max-width: 10ch; margin: 0; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq details:first-child { border-top: 1px solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding-block: var(--space-sm); font-size: var(--text-title); font-weight: 600; line-height: 1.25; cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-weight: 400; font-size: var(--text-lg); color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent); }
.faq summary:active { color: var(--color-accent-2); }
.faq details p { max-width: 60ch; padding-bottom: var(--space-lg); color: var(--color-ink-2); }
.faq details a { color: var(--color-accent); }
@media (max-width: 60rem) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-grid h2 { max-width: 20ch; } }

/* ── 8. Cierre: banda salvia con la descarga y una última pantalla ── */
.closing :focus-visible { outline-color: var(--color-ink); }
.closing { margin-top: var(--section-gap); padding-top: var(--section-gap-s); background: var(--color-salvia); color: var(--color-ink); overflow: clip; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.closing-copy { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--section-gap-s); }
.closing h2 { max-width: 12ch; font-size: var(--text-display-s); margin: 0; }
.closing .lead { color: var(--color-ink); }
.screen--close { justify-self: center; width: min(320px, 100%); aspect-ratio: 540 / 700; border-radius: 34px 34px 0 0; }
.screen--close > img { object-position: top; }
@media (max-width: 60rem) {
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-copy { padding-bottom: 0; }
  .screen--close { width: min(280px, 80%); aspect-ratio: 540 / 560; }
}