/* Coroas Funeral Portugal - estilos exclusivos de la portada.
   Portado del diseno de Claude Design sin cambios de aspecto. */
/* ---------- Home-only styles ---------- */
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* 🔴 Texto pequeño sobre la foto del hero.
   `.phone-block__sub` hereda `--ink-400`, que sobre el velo da **3,77:1** — por
   debajo del 4,5:1 que exige el texto pequeño. Con `--ink-600` sube a **7,5:1**.
   Solo se cambia DENTRO del hero: fuera va sobre fondo plano y ahi si cumple. */
.hero-home .phone-block__sub,
.hero-home .phone-block__label { color: var(--ink-600); }

/* ---------- Fondo del hero: el banner, a sangre ----------
   Antes era una ilustración SVG en degradado. Ahora es la fotografía del banner
   ocupando todo el hero, con el texto encima. */
.hero-home__bg { position: absolute; inset: 0; z-index: -1; }
.hero-home__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El interés de la foto está arriba (las flores); el recorte se hace por
     abajo, que es fondo desenfocado. */
  object-position: center 35%;
  display: block;
}

/* Velo. 🔴 No es decorativo: medido sobre la foto, el texto oscuro aguanta
   (12,6:1 de media y 6,7:1 en el peor caso en la zona del texto), pero eso vale
   para UN recorte. Como fondo a `cover` el recorte cambia con el viewport, y sin
   velo la legibilidad dependería del tamaño de la ventana.

   Es fuerte a la izquierda —donde vive el texto— y se desvanece a la derecha,
   para que la foto se siga viendo detrás de la tarjeta de producto. */
.hero-home__scrim {
  position: absolute;
  inset: 0;
  /* 🔴 PLANO y uniforme, no degradado lateral. Al retirar el cuadro de la coroa
     el hero paso a una sola columna, asi que el titular ocupa TODO el ancho: un
     degradado que caia a 0,45 en el 62 % y a 0,06 en el 85 % dejaba la parte
     derecha del texto sobre foto sin velar. El degradado tenia sentido con dos
     columnas; con una, no.

     🔴 NO ES DECORATIVO: NO LO QUITES NI LO BAJES SIN MEDIR.
     Medido con Chromium sobre el compuesto, linea a linea con
     `Range.getClientRects()`, en 375/1024/1440/1920 px:

       con velo a 0,80  -> peor caso 6,78:1 (subtitulo, 375 px, linea 4)
       SIN velo         -> ese mismo punto da 2,57:1  ← falla AA

     Ese punto cae sobre un pixel verde-oliva de la foto, rgb(158,144,64): un
     tallo o una sombra. O sea que el velo esta protegiendo texto que sin el
     seria ilegible, no adornando.

     La opacidad minima real para 4,5:1 en ese pixel es ~0,43. El 0,80 deja
     colchon para variaciones de render entre navegadores y para una posible
     recompresion de la foto. Si alguna vez hay que bajarlo para que la foto se
     note mas, el suelo razonable es 0,65-0,70 (5,5-6:1 en el peor caso); por
     debajo se juega con el minimo exacto y sin margen.

     Y es PLANO, no degradado, a proposito: asi la proteccion no depende de como
     sea la foto. Con degradado era seguro solo porque ESTA imagen es clara en la
     franja del texto; al cambiarla habria que remedir. */
  background: rgba(255, 255, 255, 0.8);
}
/* Una sola columna: al retirar el cuadro de la coroa, una rejilla de dos dejaba
   el texto apretado en la mitad izquierda con medio hero vacio. */
.hero-home__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-24) var(--sp-6) var(--sp-16);
  display: block;
}
@media (max-width: 920px) {
  /* `grid-template-columns` y `gap` eran de la rejilla de dos columnas, que ya
     no existe: `.hero-home__inner` es `display: block`. Solo queda el padding. */
  .hero-home__inner { padding: var(--sp-12) var(--sp-6) var(--sp-8); }
}
.hero-home__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 var(--sp-6);
  color: var(--ink-900);
}
.hero-home__title em {
  font-style: italic;
  /* Sin oro: el diseno pintaba esta parte en `--gold-deep`. Era el ultimo
     elemento dorado que quedaba sobre la foto del hero. La cursiva sola ya
     marca el enfasis. */
  color: inherit;
  font-weight: 400;
}
.hero-home__sub {
  font-size: var(--fs-20);
  color: var(--ink-600);
  margin: 0 0 var(--sp-8);
  line-height: 1.5;
}
.hero-home__ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.hero-home__trust {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  padding-top: var(--sp-6);
  flex-wrap: wrap;
}
.hero-home__visual {
  aspect-ratio: 4 / 5;
  background: var(--cream-200);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-home__visual svg { width: 100%; height: 100%; }
.hero-home__caption {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cream-50);
  font-size: var(--fs-14);
  background: linear-gradient(0deg, rgba(31, 27, 22, 0.65), transparent);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  border-radius: 0 0 2px 2px;
}

/* ---------- Finder ---------- */
.finder {
  background: var(--ink-900);
  color: var(--cream-100);
  padding: var(--sp-12) 0;
  position: relative;
}
.finder__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--sp-6); text-align: center; }
.finder h2 {
  color: var(--cream-50);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  margin-bottom: var(--sp-6);
}
.finder__form { position: relative; max-width: 640px; margin: 0 auto; }
.finder__input {
  width: 100%;
  padding: 1.15rem 1.5rem 1.15rem 3rem;
  min-height: 56px;
  font-size: var(--fs-18);
  background: var(--cream-50);
  border: none;
  border-radius: var(--r-md);
  color: var(--ink-900);
  font-family: var(--font-sans);
}
.finder__input::placeholder { color: var(--ink-500); }
.finder__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
}
.finder__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream-50);
  margin-top: 4px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: var(--sp-2);
  z-index: 10;
  text-align: left;
}
.finder__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* `gap` + el `flex-shrink: 0` del item final: sin las dos, `space-between`
     deja el texto y la flecha TOCANDOSE cuando no sobra espacio, y la flecha
     cede su sitio (todo item flex encoge por defecto). Es el fallo que se midio
     en `.cidade` a 320 px, donde el nombre se montaba sobre la flecha. Estas
     son sus hermanas: mismo patron, misma defensa, antes de que pase. */
  gap: var(--sp-3);
  padding: 0.7rem 0.8rem;
  font-size: var(--fs-14);
  color: var(--ink-700);
  border-radius: var(--r-sm);
}
.finder__item a:hover { background: var(--cream-100); color: var(--gold-deep); }
.finder__item--empty {
  padding: 0.8rem;
  font-size: var(--fs-14);
  color: var(--ink-500);
  font-style: italic;
}
.finder__hint { font-size: var(--fs-12); color: var(--ink-300); margin-top: var(--sp-3); letter-spacing: 0.04em; }

/* ---------- Categorias ---------- */
.categorias { padding: var(--sp-24) 0; }
.categorias__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: var(--sp-12); gap: var(--sp-6); flex-wrap: wrap; }
.categorias__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 880px) { .categorias__grid { grid-template-columns: 1fr; } }

.categoria {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--cream-50);
  border: 1px solid var(--rule);
  transition: border-color var(--t-med), transform var(--t-med);
  color: inherit;
}
.categoria:hover { border-color: var(--gold-soft); }
.categoria:hover .categoria__visual svg { transform: scale(1.02); }
.categoria__visual {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-200);
}
.categoria__visual svg { width: 100%; height: 100%; transition: transform 400ms ease; }
.categoria__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.categoria__name {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
}
.categoria__desc { color: var(--ink-500); font-size: var(--fs-14); margin: 0; flex: 1; }
.categoria__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* `gap` + el `flex-shrink: 0` del item final: sin las dos, `space-between`
     deja el texto y la flecha TOCANDOSE cuando no sobra espacio, y la flecha
     cede su sitio (todo item flex encoge por defecto). Es el fallo que se midio
     en `.cidade` a 320 px, donde el nombre se montaba sobre la flecha. Estas
     son sus hermanas: mismo patron, misma defensa, antes de que pase. */
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  margin-top: auto;
}
.categoria__price { font-family: var(--font-serif); font-size: var(--fs-20); color: var(--ink-700); }
.categoria__price span { font-size: var(--fs-12); color: var(--ink-500); margin-right: 0.3rem; }
/* Sin oro, como el resto de etiquetas. */
.categoria__arrow { color: var(--ink-600); flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Como funciona (passos) ---------- */
.passos {
  background: var(--cream-200);
  padding: var(--sp-20) 0;
}
.passos__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.passos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 880px) { .passos__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.passo { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.passo__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-48);
  color: var(--ink-900);
  line-height: 1;
}
.passo__title { font-family: var(--font-serif); font-size: var(--fs-24); color: var(--ink-900); margin: 0; }
.passo__desc { color: var(--ink-600); font-size: var(--fs-16); margin: 0; }
.passo__time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: var(--sp-2);
}

/* ---------- Confiança ---------- */
.confianca { padding: var(--sp-20) 0; }
.confianca__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 920px) { .confianca__grid { grid-template-columns: 1fr; gap: var(--sp-10); } }
.confianca__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
.stat { padding-top: var(--sp-4); }
.stat__big { font-family: var(--font-serif); font-size: var(--fs-48); line-height: 1; color: var(--ink-900); display: block; margin-bottom: var(--sp-2); }
.stat__label { font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }

/* ---------- Testemunhos ---------- */
.testemunhos { background: var(--ink-900); color: var(--cream-200); padding: var(--sp-20) 0; }
.testemunhos h2 { color: var(--cream-50); }
.testemunhos .eyebrow { color: var(--gold-soft); }
.testemunhos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); }
@media (max-width: 880px) { .testemunhos__grid { grid-template-columns: 1fr; } }
.testemunho {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--cream-100);
  position: relative;
}
.testemunho::before {
  content: "“";
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--gold);
  position: absolute;
  top: -1rem;
  left: 0.8rem;
  opacity: 0.5;
  line-height: 1;
}
.testemunho__attr {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.testemunho--placeholder {
  background: transparent;
  border: 1px dashed rgba(212, 188, 138, 0.35);
  font-style: normal;
  color: var(--ink-300);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
}
.testemunho--placeholder::before { display: none; }

/* ---------- Cidades ---------- */
.cidades { padding: var(--sp-20) 0; }
/* Sin lineas: al quitar los divisores la rejilla quedaba a medio dibujar
   (perdia la de arriba y conservaba la izquierda). Ahora separa con `gap`,
   que es lo coherente con una portada sin hairlines. */
.cidades__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-10); }
@media (max-width: 720px) { .cidades__grid { grid-template-columns: 1fr 1fr; } }
/* 🔴 A 320 px, DOS columnas no caben. Cada tarjeta se queda en ~130 px y le
   restan ~98 px utiles tras el padding; un nombre en serif de 24 px como
   «Funchal» mide ~90 px y «Ponta Delgada» parte en «Delgada» (~95 px), asi que
   no queda hueco para la flecha y el texto se le monta encima. Medido: pasaba
   en las 2 tarjetas SIN contador (Funchal/Madeira y Ponta Delgada/Açores) y
   solo a 320 px exactos; a 375 px ya se veia bien.
   Una columna les da los 272 px enteros y sobra sitio. Es la respuesta honesta:
   no es un solape que haya que parchear, es que ahi no cabian dos. */
@media (max-width: 360px) { .cidades__grid { grid-template-columns: 1fr; } }
.cidade {
  padding: var(--sp-6);
  /* 🔴 `min-width: 0` no es opcional en un item de grid. Por defecto vale `auto`,
     que es el ancho MINIMO DE CONTENIDO: si el texto no cabe, el item empuja su
     track y el grid desborda al contenedor en vez de encoger.
     Medido: a exactamente 320 px daba 4 px de desborde (`scrollWidth` 324). Los
     tracks computaban 142,3 + 12 + 145,3 = 299,6 px dentro de un contenedor de
     272 px. A 336 px y en adelante no pasaba, asi que solo salia en el ancho mas
     justo — iPhone SE de 1.ª gen. */
  min-width: 0;
  /* Sin bordes de rejilla. Un fondo suave las mantiene legibles como tarjetas
     ahora que no hay lineas que las delimiten. */
  background: var(--cream-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  transition: background var(--t-med);
}
.cidade:hover { background: var(--cream-300); }
.cidade > span { min-width: 0; }
.cidade__name { font-family: var(--font-serif); font-size: var(--fs-24); }
.cidade__sub { font-size: var(--fs-12); color: var(--ink-500); letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-top: 2px; }

/* Estas dos son la defensa del componente, aparte del salto a una columna: con
   ellas un nombre largo NUNCA puede pisar la flecha, a ningun ancho.
   `space-between` reparte el sobrante, pero cuando no sobra nada deja los dos
   items TOCANDOSE: hace falta un `gap` de verdad. Y la flecha, como cualquier
   item flex, encoge por defecto (`flex-shrink: 1`) y cedia su sitio al texto. */
.cidade__arrow { color: var(--ink-600); flex-shrink: 0; }

/* Los 8 concelhos del area metropolitana: misma rejilla, jerarquia menor.
   ⚠️ `repeat(auto-fit, minmax(...))` y NO `repeat(4, 1fr)`: con 8 items en 4
   columnas la rejilla queda exacta hoy, pero el dia que sean 7 o 9 deja una
   pista vacia y la fila muere antes del borde — es el fallo del ancho util que
   este proyecto ya se comio dos veces (la sexta columna de la rejilla de
   coroas, y las 5 tarjetas en `repeat(6, 1fr)`). `auto-fit` colapsa las pistas
   que sobran. */
.cidades__sub {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cidades__grid--concelhos {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 0;
}
/* El concelho no lleva subtítulo, así que su caja puede ser más baja: sin esto
   quedaba con el mismo alto que las de distrito y las dos filas se leían como
   un solo bloque de 17 elementos iguales. */
.cidade--sm { padding: var(--sp-3) var(--sp-4); }
.cidade--sm .cidade__name { font-size: var(--fs-19); }

/* ---------- Editorial ---------- */
.editorial { padding: var(--sp-20) 0 var(--sp-16); background: var(--cream-50); }
.editorial__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin-top: var(--sp-10); }
@media (max-width: 880px) { .editorial__grid { grid-template-columns: 1fr; } }
.artigo { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 2px solid var(--ink-900); color: inherit; text-decoration: none; }
.artigo:hover .artigo__title { color: var(--gold-deep); }
.artigo__kind { font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-600); }
.artigo__title { font-family: var(--font-serif); font-size: var(--fs-28); line-height: 1.15; color: var(--ink-900); transition: color var(--t-fast); margin: 0; }
.artigo__desc { color: var(--ink-500); font-size: var(--fs-14); margin: 0; }

/* ---------- Featured · slider de tanatórios ---------- */
.featured {
  padding: var(--sp-20) 0 var(--sp-16);
  background: #ffffff;
}
.featured__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
  flex-wrap: wrap;
}
.featured__controls { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.featured__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--rule-strong);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.featured__btn:hover { background: var(--ink-900); color: #ffffff; border-color: var(--ink-900); }
.featured__btn:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--ink-400); }
.featured__btn:disabled:hover { background: transparent; color: var(--ink-400); border-color: var(--rule-strong); }

.featured__rail {
  /* break out of container for full-bleed */
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 max(var(--sp-6), calc(50vw - var(--container) / 2));
}
.featured__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
}
.featured__track::-webkit-scrollbar { height: 4px; }
.featured__track::-webkit-scrollbar-track { background: transparent; }
.featured__track::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 2px; }
.featured__track::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.featured__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-med), transform var(--t-med);
}
.featured__card:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.featured__card:hover .featured__name { color: var(--gold-deep); }
.featured__visual {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-200);
}
.featured__visual svg { width: 100%; height: 100%; }
/* Foto real del recinto. Aqui antes solo habia un SVG decorativo; la foto
   necesita `cover` para llenar el 4/5 sin deformarse, porque las 8 llegaron
   con proporciones muy distintas (de 230x510 a 680x453). */
.featured__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.featured__kind {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.featured__name {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  color: var(--ink-900);
  line-height: 1.2;
  margin: 4px 0 0;
  transition: color var(--t-fast);
}
.featured__city {
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.featured__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  /* `gap` + el `flex-shrink: 0` del item final: sin las dos, `space-between`
     deja el texto y la flecha TOCANDOSE cuando no sobra espacio, y la flecha
     cede su sitio (todo item flex encoge por defecto). Es el fallo que se midio
     en `.cidade` a 320 px, donde el nombre se montaba sobre la flecha. Estas
     son sus hermanas: mismo patron, misma defensa, antes de que pase. */
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-12);
  color: var(--ink-500);
}
.featured__arrow { color: var(--ink-600); flex-shrink: 0; }

/* Última carta — "ver todos" */
.featured__card--all { background: var(--ink-900); color: var(--cream-100); border-color: var(--ink-900); }
.featured__card--all:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.featured__card--all .featured__name { color: var(--cream-50); }
.featured__card--all:hover .featured__name { color: #ffffff; }
.featured__card--all .featured__kind { color: var(--cream-300); }
.featured__card--all .featured__city { color: var(--ink-300); }
.featured__card--all .featured__meta { border-color: rgba(255, 255, 255, 0.12); color: var(--ink-300); }
.featured__card--all .featured__arrow { color: var(--cream-300); flex-shrink: 0; }
.featured__visual--all {
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--cream-300);
}
.featured__plus { font-family: var(--font-serif); font-size: 5rem; line-height: 0.8; font-weight: 400; color: var(--cream-300); }
.featured__plus-label { font-size: var(--fs-14); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-200); }

@media (max-width: 720px) {
  .featured__card { flex: 0 0 240px; }
  .featured__controls { width: 100%; justify-content: flex-end; }
}

/* ---------- SEO + imagem ---------- */
.seo-block {
  padding: var(--sp-24) 0;
  background: var(--cream-200);
}
.seo-block__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
@media (max-width: 980px) { .seo-block__grid { grid-template-columns: 1fr; gap: var(--sp-10); } }

.seo-block__copy h2 { max-width: 18ch; margin-bottom: var(--sp-8); line-height: 1.15; }
.seo-block__copy .lead { color: var(--ink-700); margin-bottom: var(--sp-4); }
.seo-block__copy p { color: var(--ink-600); }

.checks {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0 var(--sp-6);
}
.checks li {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  align-items: start;
}
.checks li svg {
  width: 22px;
  height: 22px;
  color: var(--ink-600);
  flex-shrink: 0;
  margin-top: 2px;
  padding: 3px;
  background: var(--cream-300);
  border-radius: 50%;
  box-sizing: content-box;
}
.checks li div { display: flex; flex-direction: column; gap: 2px; }
.checks li strong { font-family: var(--font-serif); font-size: var(--fs-18); font-weight: 500; color: var(--ink-900); line-height: 1.3; }
.checks li span { font-size: var(--fs-14); color: var(--ink-500); line-height: 1.5; }
.checks li a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--ink-400); text-underline-offset: 0.2em; }

.seo-block__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #ffffff;
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.seo-block__visual svg { width: 100%; height: 100%; }


/* ---------- Foto de producto en el bloque «Floristas portuguesas» ----------
   El diseno tenia aqui una ilustracion SVG con la etiqueta
   `[PLACEHOLDER: substituir por fotografia de florista em estudio]`. Ahora es
   una foto real del catalogo. */
.seo-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}