/* ==========================================================================
   Dinamicolor — sistema visual vivo
   Dos colores: morado #5B0080 y amarillo #FDB502.
   Sin degradados tenues ni sombras difusas.
   ========================================================================== */

:root{
  --accent:#5b0080;
  --accent-dark:#450062;
  --accent-2:#fdb502;
  --dark:#5b0080;

  --line:#e6e6e2;
  --line-2:#cfcfc8;
  --bg-2:#fafaf7;
}

/* ------------------------------------------------ fuera degradados tenues */

body,
.site-header,
.hero,
.section,
.site-footer,
.cta-band,
.finder,
.price-band,
.hero-visual::before,
.card,
.card__icon,
.panel,
.work,
.work__ph,
.chip,
.hero-tag,
.browser,
.faq details,
.finder__box,
.fresult,
.badge-line,
#inicio,
#para-ti,
#problema,
#precio,
#incluye,
#proceso,
#portafolio,
#preguntas,
#buscador,
#productos{
  background-image:none !important;
}

body{background:#fff}
.site-header{background:#fff}

/* ------------------------------------------------ fuera sombras difusas */

.browser,
.card,
.panel,
.work,
.price-card,
.finder__box,
.fresult,
.fpick,
.cta-band,
.site-header,
.btn,
.hero-tag,
.qa-band{
  box-shadow:none !important;
}

.card:hover,
.work:hover,
.fpick:hover,
.pcard:hover{
  box-shadow:none !important;
}

/* ------------------------------------------------ botones */

.btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn--primary:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:#fff;
}
.btn--ghost{
  background:transparent;
  border-color:var(--line-2);
  color:var(--ink);
}
.btn--ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ------------------------------------------------ acentos de texto */

.eyebrow{
  color:var(--accent);
  font-weight:700;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px;
  height:3px;
  margin-right:10px;
  vertical-align:middle;
  background:var(--accent-2);
}

.badge-line{color:var(--accent)}
.badge-line::before{background:var(--accent-2);height:2px}

/* El precio, resaltado en amarillo con texto oscuro */
.hl{
  background:var(--accent-2);
  color:#1a1207;
  padding:0 .14em;
  border-radius:5px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ------------------------------------------------ tarjetas y chips */

.card{
  border:1px solid var(--line);
  border-radius:14px;
}
.card:hover{border-color:var(--accent)}
.card__icon,
.feature__icon{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Los tres iconos de «¿Qué necesita tu negocio?» del mismo color */
#productos .card__icon{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}
.card--link:hover .card__cta .ico{transform:translateX(3px)}
.card__cta{color:var(--accent)}
.card--link:hover .card__cta{color:var(--accent-dark)}

.chip{
  background:#fff;
  border:1px solid var(--line-2);
  color:var(--ink-2);
}
.chip:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ------------------------------------------------ puntos numerados */

.point__num,
.flow__num{
  color:#1a1207;
  background:var(--accent-2);
  border-color:var(--accent-2);
  font-weight:800;
}

/* ------------------------------------------------ cabecera */

.site-header{border-bottom:1px solid var(--line)}
.site-nav a{
  font-weight:600;
  transition:color .18s var(--ease);
}

/* Hover y página actual: negrita morada sin que el texto se mueva */
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus-visible,
.site-nav a[aria-current="page"]{
  color:var(--accent);
  -webkit-text-stroke:.55px currentColor;
}

/* ==========================================================================
   HERO CON SLIDER
   ========================================================================== */

.hero{padding-block:clamp(32px,4vw,56px) clamp(28px,3vw,44px)}

.hero-slider{
  position:relative;
  display:grid;
}

/* Las dos diapositivas ocupan el mismo espacio: se cruzan con suavidad */
.hero-slide{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transform:translateX(26px);
  pointer-events:none;
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    visibility 0s linear .55s;
}

.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    visibility 0s;
}

@media (prefers-reduced-motion:reduce){
  .hero-slide{
    transition:none;
    transform:none;
  }
}

.hero-tabs{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:clamp(26px,3vw,40px);
  flex-wrap:wrap;
}

.hero-tab{
  appearance:none;
  font:inherit;
  font-size:.86rem;
  font-weight:640;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:#fff;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.hero-tab:hover{border-color:var(--accent);color:var(--accent)}
.hero-tab.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Cuenta atrás circular junto a las pestañas */
.hero-chrome{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:clamp(26px,3vw,40px);
  flex-wrap:wrap;
}
.hero-chrome .hero-tabs{margin-top:0}

.hero-timer{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 auto;
  display:block;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  border-radius:50%;
  transition:transform .2s var(--ease);
}
.hero-timer:hover{transform:scale(1.06)}
.hero-timer__svg{
  width:100%;
  height:100%;
  display:block;
  transform:rotate(-90deg);
}
.hero-timer__track{
  fill:none;
  stroke:var(--line-2);
  stroke-width:6;
}
.hero-timer__bar{
  fill:none;
  stroke:var(--accent);
  stroke-width:6;
  stroke-linecap:round;
}

.hero-timer__icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--accent);
}
.hero-timer__icon svg{width:15px;height:15px;display:block}
.hero-timer__icon--play{display:none}
.hero-timer.is-paused .hero-timer__icon--pause{display:none}
.hero-timer.is-paused .hero-timer__icon--play{display:grid}
.hero-timer:hover .hero-timer__icon{color:var(--accent-dark)}

/* Flechas a los lados del anillo */
.hero-arrow{
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:#fff;
  color:var(--accent);
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.hero-arrow:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.hero-arrow .ico{width:17px;height:17px}

/* Fila de botones con la imagen del slide al lado (solo móvil) */
.hero-cta-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin-top:22px;
}
.hero-actions{flex:1;margin-top:0}
.hero-mini{display:none}

@media (max-width:520px){
  .hero-timer{width:46px;height:46px}
  .hero-timer__num{font-size:.8rem}
}

/* Tarjeta de agenda (segundo slide) */
.agenda-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  max-width:420px;
  margin-inline:auto;
}
.agenda-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--accent);
  color:#fff;
}
.agenda-card__day{font-size:.95rem;font-weight:700;letter-spacing:.01em}
.agenda-card__count{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--accent-2);
  color:#1a1207;
  padding:3px 10px;
  border-radius:999px;
}
.agenda-card__list{list-style:none;margin:0;padding:6px 0}
.agenda-card__list li{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.agenda-card__list li:last-child{border-bottom:0}
.agenda-card__time{
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.agenda-card__who{color:var(--ink);font-weight:560}
.agenda-card__svc{color:var(--ink-3);font-size:.8rem}
.agenda-card__foot{
  padding:14px 20px;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}
.agenda-card__badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  font-weight:700;
  color:var(--accent);
}
.agenda-card__badge::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--accent-2);
}

/* ==========================================================================
   SECCIONES
   ========================================================================== */

.section{border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}

/* El precio pasa a fondo claro */
#precio{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
#precio .eyebrow{color:var(--accent)}
#precio h2{color:var(--ink)}
#precio .lead{color:var(--ink-2)}
#precio .amount{color:var(--accent)}
#precio .amount small{color:var(--ink-3)}
#precio .price-desc{color:var(--ink-2)}
#precio .price-note{color:var(--ink-3)}
#precio .price-note strong{color:var(--ink)}
#precio .panel{background:var(--bg-2);border-color:var(--line)}
#precio .panel__title{color:var(--ink-3)}
#precio .panel__list li{color:var(--ink-2);border-bottom-color:var(--line)}
#precio .panel__list .ico--check{color:var(--accent)}
#precio .btn--light{background:var(--accent);border:1px solid var(--accent);color:#fff}
#precio .btn--light:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* Los estándares técnicos van sobre fondo blanco */
#incluye{
  background:#fff;
  color:var(--ink);
  border-top:1px solid var(--line);
}
#incluye .eyebrow{color:var(--accent)}
#incluye .eyebrow::before{background:var(--accent-2)}
#incluye h2{color:var(--ink)}
#incluye .lead{color:var(--ink-2)}
#incluye .card{
  background:#fff;
  border-color:var(--line);
}
#incluye .card:hover{border-color:var(--accent)}
#incluye .card h3{color:var(--ink)}
#incluye .card p{color:var(--ink-2)}
#incluye .card__icon{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* ==========================================================================
   BANDA DE RUBROS — imágenes horizontales con la lista encima
   ========================================================================== */

.trades-band{
  position:relative;
  margin-top:clamp(26px,3vw,38px);
  overflow:hidden;
  background:var(--accent);
  isolation:isolate;
}

.trades-band__media{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
.trades-band__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.05);
}

.trades-band__shade{
  position:absolute;
  inset:0;
  background:var(--accent);
  opacity:.86;
}

.trades-band__content{
  position:relative;
  padding-block:clamp(48px,5vw,76px);
}

/* La sección entera va sobre las imágenes */
#para-ti{
  padding:0;
  border-top:0;
}
#para-ti .trades-band{margin-top:0}
#para-ti h2{color:#fff;max-width:24ch}
#para-ti .lead{color:rgba(255,255,255,.88);max-width:62ch}
#para-ti .eyebrow{color:var(--accent-2)}
#para-ti .eyebrow::before{background:var(--accent-2)}
#para-ti .section-head{margin-bottom:clamp(28px,3vw,40px)}

.trades-band__label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:18px;
}

.trades-band__chips{
  gap:8px;
  max-width:920px;
}
.trades-band__chips .chip{
  background:#fff;
  border:0;
  color:var(--accent);
  font-weight:640;
  font-size:.8rem;
  padding:6px 14px;
}
.trades-band__chips .chip:hover{
  background:var(--accent-2);
  color:#1a1207;
}

@media (max-width:760px){
  .trades-band__media{grid-template-columns:repeat(3,1fr)}
  .trades-band__media img:nth-child(n+4){display:none}
}

/* ==========================================================================
   CTA Y PIE
   ========================================================================== */

.cta-band{
  background:var(--accent);
  color:#fff;
  border-radius:16px;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.86)}
.cta-band .btn--light{background:var(--accent-2);border:1px solid var(--accent-2);color:#1a1207}
.cta-band .btn--light:hover{background:#e8a700;border-color:#e8a700}

.site-footer{
  background:var(--accent);
  color:rgba(255,255,255,.86);
  border-top:0;
  border-image:none;
}
.site-footer .logo__img{filter:brightness(0) invert(1)}
.site-footer p{color:rgba(255,255,255,.78)}
.site-footer a,
.footer-nav a,
.footer-legal a{color:rgba(255,255,255,.9)}
.site-footer a:hover,
.footer-nav a:hover,
.footer-legal a:hover{color:var(--accent-2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18)}
.footer-bottom p{color:rgba(255,255,255,.7)}

/* ==========================================================================
   BUSCADOR — sobre fondo morado
   ========================================================================== */

#buscador{
  background:var(--accent);
  color:#fff;
  border-top:0;
}

#buscador h2{color:#fff}
#buscador .lead{color:rgba(255,255,255,.88)}
#buscador .lead em{color:#fff;font-weight:700}
#buscador .eyebrow{color:var(--accent-2)}

#buscador .finder__box{
  border-color:transparent;
  background:#fff;
}
#buscador .finder__box:focus-within{
  border-color:transparent;
  outline:3px solid var(--accent-2);
  outline-offset:2px;
}
#buscador .finder__go{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
#buscador .finder__go:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
}

#buscador .finder__chips-label{color:rgba(255,255,255,.78)}
#buscador .chip--button{
  background:#fff;
  border-color:#fff;
  color:var(--accent);
  font-weight:640;
}
#buscador .chip--button:hover{
  background:var(--accent-2);
  border-color:var(--accent-2);
  color:#1a1207;
}

/* Las tarjetas de resultado siguen en blanco, con texto oscuro */
#buscador .fresult{
  background:#fff;
  color:var(--ink);
  border-color:transparent;
}
#buscador .fresult__name{color:var(--ink)}
#buscador .fresult__count{color:var(--ink-3)}

#buscador .finder__empty{
  background:transparent;
  border:1px dashed rgba(255,255,255,.45);
  color:rgba(255,255,255,.92);
}
#buscador .fresult .finder__empty{
  background:var(--bg-2);
  border:1px dashed var(--line-2);
  color:var(--ink-2);
}
#buscador .finder__results > .finder__empty a{color:var(--accent-2);text-decoration:underline}

.fpick{background:#fff;border-color:var(--line-2)}
.fpick:hover{border-color:var(--accent)}
.fpick__price{color:var(--accent)}
.fpick__cta{color:var(--accent)}

/* ==========================================================================
   PÁGINAS DE PRODUCTO
   ========================================================================== */

body[data-accent="web"],
body[data-accent="citas"],
body[data-accent="mkt"]{
  --p:var(--accent);
  --p-soft:#f6ecfa;
  --p-line:rgba(91,0,128,.22);
  --p-wash:none;
}

body[data-accent] .page-hero{
  background-image:none;
  border-bottom:1px solid var(--line);
}

.price-card{
  border-color:var(--line-2);
  border-top:4px solid var(--accent-2);
}
.price-card__amount{color:var(--accent)}
.price-card__amount s{
  color:var(--ink-3);
  text-decoration:line-through;
  font-weight:600;
  font-size:.75em;
}
.price-card__list .ico{color:var(--accent)}

.feature__icon{color:#fff}
.steps li::before,
.step__num{background:var(--accent-2);color:#1a1207}

.notice{
  border-left-color:var(--accent-2);
  background:var(--bg-2);
}

.section .flow__num{background:var(--accent-2);color:#1a1207}

/* ==========================================================================
   AJUSTES FINOS
   ========================================================================== */

::selection{background:var(--accent-2);color:#1a1207}

/* Sin tintes pastel en ninguna parte */
.chip--soft,
.fpick,
.notice,
.work__ph,
.fresult__chips .chip{
  background-image:none !important;
}
.chip--soft{
  background:#fff !important;
  border:1px solid var(--line-2) !important;
  color:var(--ink-2) !important;
}
.fpick{background:#fff}
.work__ph{background:var(--bg-2) !important}

a:focus-visible,
button:focus-visible,
.hero-tab:focus-visible{
  outline:3px solid var(--accent-2);
  outline-offset:2px;
}

.work--link:hover .work__media img{transform:scale(1.03)}
.work__link{color:var(--accent)}

/* La sección de trabajos lleva un gris suave de fondo */
#portafolio{
  background:#f3f3f0;
  border-top:1px solid var(--line);
}
#portafolio .work{
  background:#fff;
  border:1.5px solid #c7c7bf;
  border-radius:16px;
  overflow:hidden;
}
#portafolio .work:hover{
  border-color:var(--accent);
}
#portafolio .work__title{font-size:1.03rem}
#portafolio .work__cat{color:var(--ink-2)}

/* ==========================================================================
   TIPOGRAFÍA — los textos pequeños suben de tamaño
   ========================================================================== */

/* Etiquetas y metadatos: mínimo 13,6 px */
.eyebrow,
.badge-line,
.panel__title,
.price-card__label,
.trades-band__label,
.work__year,
.fpick__price small,
.hero-timer__num{
  font-size:.8rem;
}

/* Texto secundario: mínimo 14 px */
.card__meta,
.work__cat,
.hero-meta,
.price-note,
.price-note--soft,
.footer-bottom p,
.site-footer p,
.footer-legal a,
.footer-nav a,
.finder__chips-label,
.fresult__count,
.fpick__desc,
.fpick__cta,
.work__link,
.pcard__cat,
.chip,
.chip--button,
.chip--soft,
.install-btn{
  font-size:.875rem;
}

/* Párrafos de apoyo en las páginas de producto */
.price-card__note,
.price-card__list,
.notice,
.feature p,
.flow__item p,
.check-list li{
  font-size:.94rem;
}

.trades-band__chips .chip{font-size:.85rem}
#buscador .chip--button{font-size:.85rem}

/* ==========================================================================
   PIE — el botón «Instalar app» sobre el morado
   ========================================================================== */

.site-footer .install-btn{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:transparent;
}
.site-footer .install-btn:hover{
  background:var(--accent-2);
  border-color:var(--accent-2);
  color:#1a1207;
}
.site-footer .install-btn .ico{color:currentColor}

/* ==========================================================================
   LECTURA CÓMODA — base más grande y grises con contraste
   ========================================================================== */

html{font-size:112.5%}          /* 18 px de base */

:root{
  --ink-2:#2e2e2b;              /* antes #3f3f3d */
  --ink-3:#4a4a46;              /* antes #6f6f6a */
}

body{line-height:1.66;font-size:1rem}

/* Etiquetas y metadatos */
.eyebrow,
.badge-line,
.panel__title,
.price-card__label,
.trades-band__label,
.work__year,
.fpick__price small,
.hero-timer__num{
  font-size:.86rem;
}

/* Texto secundario */
.card__meta,
.work__cat,
.hero-meta,
.price-note,
.price-note--soft,
.footer-bottom p,
.site-footer p,
.footer-legal a,
.footer-nav a,
.finder__chips-label,
.fresult__count,
.fpick__desc,
.fpick__cta,
.fpick__price--soon,
.work__link,
.pcard__cat,
.chip,
.chip--button,
.chip--soft,
.install-btn{
  font-size:.95rem;
}

/* Párrafos de apoyo */
.price-card__note,
.price-card__list,
.notice,
.feature p,
.flow__item p,
.check-list li,
.agenda-card__list li{
  font-size:1rem;
}

.trades-band__chips .chip,
#buscador .chip--button{font-size:.92rem}

/* Los grises suaves pasan a un tono legible */
.card__meta,
.work__cat,
.price-note,
.price-note--soft,
.fresult__count,
.fpick__price--soon,
.pcard__cat{color:var(--ink-2)}

.chip,
.chip--button{color:var(--ink)}

.site-footer p,
.footer-nav a,
.footer-legal a{color:rgba(255,255,255,.92)}
.footer-bottom p{color:rgba(255,255,255,.85)}

#para-ti .lead,
#buscador .lead{color:rgba(255,255,255,.95)}
.trades-band__label{color:var(--accent-2);font-weight:700}

/* ==========================================================================
   HERO COMPACTO — misma altura en los dos slides
   ========================================================================== */

.hero{
  padding-block:clamp(18px,2.2vw,32px) clamp(14px,1.8vw,24px);
}
.hero-grid{
  gap:clamp(24px,3vw,52px);
  align-items:center;
}

.hero h1{
  font-size:clamp(1.7rem,3.1vw,2.5rem);
  line-height:1.06;
  max-width:17ch;
}
.hero .lead{
  font-size:.97rem;
  line-height:1.55;
  max-width:46ch;
  margin-top:14px;
}
.hero-actions{margin-top:22px;gap:10px}
.hero-meta{margin-top:16px;font-size:.78rem}

/* La columna visual manda la altura: igual en ambos slides */
.hero-visual{
  height:clamp(320px,40vh,430px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.hero-visual .browser{
  flex:1;
  min-height:0;
  width:100%;
  max-width:540px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}
.hero-visual .browser__bar{flex:0 0 auto}
.hero-visual .browser__shot-wrap{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.hero-visual .browser__shot{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:top center;
}

.hero-visual .agenda-card{
  max-width:400px;
  width:100%;
  margin-inline:auto;
}

.hero-tag{flex:0 0 auto;align-self:center}

.hero-chrome{margin-top:clamp(16px,2vw,24px)}

@media (max-width:900px){
  .hero-visual{height:clamp(280px,34vh,380px)}
  .hero h1{font-size:clamp(1.6rem,5.4vw,2.2rem);max-width:20ch}
}

/* ==========================================================================
   HERO EN MÓVIL — cabe completo, sin scroll
   ========================================================================== */

@media (max-width:820px){
  .hero{
    padding-block:10px 12px;
  }

  /* Se ocultan las imágenes y las pestañas; los botones se quedan */
  .hero-visual{
    display:none;
  }

  .hero-tabs{
    display:none;
  }

  .hero h1{
    font-size:clamp(1.5rem,6.2vw,2rem);
    line-height:1.08;
    max-width:none;
  }

  .hero .lead{
    font-size:.97rem;
    line-height:1.52;
    margin-top:10px;
    max-width:none;
  }

  .hero .eyebrow{
    margin-bottom:8px;
    font-size:.78rem;
  }

  .hero-grid{
    gap:10px;
  }

  /* Botones a la izquierda, imagen del slide a la derecha */
  .hero-cta-row{
    margin-top:16px;
    gap:10px;
  }

  .hero-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-top:0;
  }

  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }

  .hero-mini{
    display:grid;
    flex:0 0 40%;
    border-radius:12px;
    overflow:hidden;
    background:var(--accent);
    place-items:center;
  }

  .hero-mini img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .hero-mini--calendar .ico{
    width:34px;
    height:34px;
    color:#fff;
  }

  .hero-meta{
    margin-top:12px;
  }

  .hero-chrome{
    margin-top:12px;
    gap:10px;
  }

  .hero-arrow{width:34px;height:34px}
}

/* ==========================================================================
   BUSCADOR EN MÓVIL — el borde va solo en el campo de texto
   ========================================================================== */

@media (max-width:820px){
  #buscador .finder__box{
    border:0;
    background:transparent;
    padding:0;
    border-radius:0;
    box-shadow:none;
  }

  #buscador .finder__box:focus-within{
    border:0;
    outline:none;
    box-shadow:none;
  }

  #buscador .finder__icon{
    display:none;
  }

  #buscador .finder__input{
    width:100%;
    padding:14px 16px;
    font-size:1rem;
    color:var(--ink);
    background:#fff;
    border:1.5px solid #b9b9b1;
    border-radius:12px;
  }

  #buscador .finder__input:focus{
    border-color:var(--accent);
    outline:3px solid var(--accent-2);
    outline-offset:1px;
  }

  #buscador .finder__go{
    width:100%;
    margin-top:10px;
    padding:14px 20px;
    border-radius:12px;
    background:var(--accent-2);
    border:1.5px solid var(--accent-2);
    color:#1a1207;
    font-weight:700;
  }

  #buscador .finder__go:hover,
  #buscador .finder__go:active{
    background:#e8a700;
    border-color:#e8a700;
    color:#1a1207;
  }
}

/* ==========================================================================
   TARJETAS DE PRODUCTO — gris suave, con morado, amarillo y negro
   ========================================================================== */

#productos .card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#f3f3f0;
  border:1px solid #e2e2dc;
  border-radius:16px;
  padding:28px 24px 20px;
  color:var(--ink);
  overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}

/* Hoy hay dos productos: dos columnas, no tres */
#productos .cards{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:760px){
  #productos .cards{grid-template-columns:1fr}
}

#productos .card:hover,
#productos .card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent);
  background:#fff;
}

#productos .card h3{
  color:var(--ink);
  font-size:1.16rem;
  margin-top:18px;
}

#productos .card p{
  color:var(--ink-2);
  font-size:.95rem;
}

#productos .card__icon{
  width:56px;
  height:56px;
  border-radius:15px;
  background:#fff;
  border:1px solid #e2e2dc;
  color:var(--accent);
  display:grid;
  place-items:center;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
#productos .card:hover .card__icon{
  border-color:var(--accent);
}
#productos .card__icon .ico{
  width:30px;
  height:30px;
}

#productos .card__meta{
  align-self:flex-start;
  margin-top:16px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--accent-2);
  color:#1a1207;
  font-weight:700;
  font-size:.85rem;
}

#productos .card__cta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #e2e2dc;
  color:var(--accent);
  font-weight:700;
}
#productos .card__cta .ico{
  color:var(--accent);
  transition:transform .25s var(--ease);
}
#productos .card:hover .card__cta .ico{transform:translateX(4px)}