/* =========================================================
   Portada de Floma Studio (index.html y en/index.html)
   Se carga después de styles.css: los diálogos, el formulario,
   el visor y las páginas legales siguen usando styles.css.
   ========================================================= */

.inicio {
  --marco: min(1320px, 100% - 64px);
  --tinta: var(--cacao);
  --suave: #6B5348;
  --curva: cubic-bezier(.2, .8, .2, 1);
  background: var(--crema);
  overflow-x: clip;
}
.inicio h1, .inicio h2, .inicio h3 { letter-spacing: -.045em; }
.marco { width: var(--marco); margin-inline: auto; }
html:has(.inicio) { scroll-padding-top: 80px; }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-radius: 0;
  background: var(--cacao); color: var(--crema);
  font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
  box-shadow: 6px 6px 0 var(--naranja);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva);
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--naranja); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--naranja); }
.btn--claro { background: var(--naranja); color: var(--cacao); box-shadow: 6px 6px 0 var(--crema); }
.btn--claro:hover { box-shadow: 9px 9px 0 var(--crema); }
.enlace { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--naranja); transition: text-underline-offset .2s; }
.enlace:hover { text-underline-offset: 3px; }

/* ---------- Cabecera ---------- */
.cab { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--crema) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1.5px solid transparent; transition: border-color .3s; }
.cab.con-scroll { border-bottom-color: var(--cacao); }
.cab__fila { width: var(--marco); margin-inline: auto; display: flex; align-items: center; gap: 36px; height: 76px; }
.cab__marca img { height: 58px; width: auto; transition: transform .3s var(--curva); }
.cab__marca:hover img { transform: rotate(-4deg); }
.inicio .menu { display: flex; gap: 34px; margin: 0 0 0 auto; }
.inicio .menu a { font-weight: 700; font-size: 16px; padding: 6px 0; }
.inicio .menu a::after { height: 2px; bottom: 0; border-radius: 0; background: var(--cacao); transform-origin: left; }
.inicio .menu a.activo { font-weight: 700; }
.inicio sup { font-size: .62em; font-weight: 700; color: var(--suave); margin-right: 5px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.inicio .idioma { border: 0; padding: 0; gap: 4px; font-size: 14px; }
.cab__cta { font-weight: 800; text-decoration: none; padding: 10px 18px; background: var(--naranja); border: 2px solid var(--cacao); box-shadow: 3px 3px 0 var(--cacao); transition: transform .15s, box-shadow .15s; }
.cab__cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cacao); }

/* ---------- Cabeceras de sección ---------- */
.seccion__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 16px 48px; margin-bottom: 44px; }
.seccion__cab h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 850; line-height: 1; margin: 0; }
.seccion__cab p { margin: 0; color: var(--suave); font-size: 17px; }
.seccion__cab b { color: var(--cacao); }

/* ---------- Portada ---------- */
.portada {
  width: var(--marco); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 580px; padding-top: 24px;
}
.portada__eti { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.portada__titulo { font-size: clamp(44px, 5.6vw, 76px); font-weight: 850; line-height: .98; letter-spacing: -.05em; margin: 0 0 26px; }
/* "solo lugar." marcado en naranja */
.marcado { position: relative; z-index: 0; white-space: nowrap; }
.marcado::before {
  content: ""; position: absolute; z-index: -1; left: -.05em; right: -.04em; bottom: .04em; height: .32em;
  background: var(--naranja); transform: skewX(-12deg) rotate(-1deg); transform-origin: left;
  animation: marca-entra .9s .3s var(--curva) both;
}
@keyframes marca-entra { from { transform: skewX(-12deg) rotate(-1deg) scaleX(0); } }
.portada__entrada { margin: 0 0 34px; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--suave); }
.portada__entrada b { color: var(--cacao); }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.portada__mascota { align-self: end; }
.portada .mascota-viva { width: 110%; margin-left: -4%; }

/* ---------- Servicios ---------- */
.oficios { background: var(--papel); padding: 100px 0; }
.oficios__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--cacao); }
.oficio { position: relative; display: flex; flex-direction: column; padding: 22px 24px 26px 0; cursor: pointer; }
.oficio + .oficio { padding-left: 24px; border-left: 1.5px solid var(--linea); }
.oficio__num { font-size: 14px; font-weight: 800; color: var(--suave); font-variant-numeric: tabular-nums; margin-bottom: 26px; transition: color .2s; }
.oficio h3 { font-size: 23px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 10px; }
.oficio p { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--suave); }
.oficio__ver { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--naranja); transition: text-underline-offset .2s; }
.oficio__ver span { display: inline-block; transition: transform .2s var(--curva); }
.oficio:hover .oficio__num { color: var(--naranja); }
.oficio:hover .oficio__ver { text-underline-offset: 3px; }
.oficio:hover .oficio__ver span { transform: translateX(4px); }

/* ---------- Trabajos: escaparate de categorías ---------- */
.trabajos { background: #FDEEE1; padding: 100px 0; }
.escaparate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.vitrina {
  position: relative; display: grid; grid-template-rows: auto auto; overflow: hidden;
  background: var(--papel); border: 2px solid var(--cacao); border-radius: 14px;
  box-shadow: 0 0 0 var(--cacao);
  transition: transform .25s var(--curva), box-shadow .25s var(--curva);
}
.vitrina:hover, .vitrina:focus-within { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--cacao); }
.vitrina__foto { grid-row: 1; grid-column: 1; aspect-ratio: 16 / 10; overflow: hidden; background: var(--melocoton); border-bottom: 2px solid var(--cacao); }
.vitrina__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva); }
.vitrina:hover .vitrina__foto img { transform: scale(1.05); }
.vitrina__pie { grid-row: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 18px 22px; }
.vitrina__num { font-size: 14px; font-weight: 800; color: var(--suave); font-variant-numeric: tabular-nums; }
.vitrina h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; }
/* El nombre de la categoría abre su documento; su área cubre toda la tarjeta */
.vitrina__abrir { all: unset; cursor: pointer; }
.vitrina__abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vitrina__abrir:focus-visible { outline: 3px solid var(--naranja); outline-offset: 4px; border-radius: 4px; }
.vitrina__cuenta { font-size: 14px; font-weight: 700; color: var(--suave); white-space: nowrap; }
.vitrina__flecha {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--naranja); font-weight: 800; transition: transform .3s var(--curva), background .2s;
}
.vitrina:hover .vitrina__flecha { transform: rotate(45deg); background: var(--cacao); color: var(--crema); }

/* Desplegable: los proyectos suben sobre la foto al pasar el ratón o al tabular dentro */
.vitrina__lista {
  grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 22px;
  list-style: none; background: color-mix(in srgb, var(--cacao) 92%, transparent);
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path .45s var(--curva), visibility 0s .45s;
}
.vitrina:hover .vitrina__lista, .vitrina:focus-within .vitrina__lista { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s var(--curva), visibility 0s; }
.vitrina__lista button {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--crema); cursor: pointer;
  padding: 8px 14px; background: none; border: 1.5px solid rgba(255, 241, 230, .4); border-radius: 999px;
  opacity: 0; transform: translateY(8px);
  transition: background .2s, color .2s, border-color .2s, opacity .3s, transform .35s var(--curva);
}
.vitrina__lista small { font-size: 12px; font-weight: 600; opacity: .7; margin-left: 4px; }
.vitrina:hover .vitrina__lista button, .vitrina:focus-within .vitrina__lista button { opacity: 1; transform: none; }
.vitrina__lista li:nth-child(2) button { transition-delay: 0s, 0s, 0s, .04s, .04s; }
.vitrina__lista li:nth-child(3) button { transition-delay: 0s, 0s, 0s, .08s, .08s; }
.vitrina__lista li:nth-child(4) button { transition-delay: 0s, 0s, 0s, .12s, .12s; }
.vitrina__lista li:nth-child(5) button { transition-delay: 0s, 0s, 0s, .16s, .16s; }
.vitrina__lista button:hover, .vitrina__lista button:focus-visible { background: var(--naranja); border-color: var(--naranja); color: var(--cacao); outline: none; }

/* Con pantalla táctil no hay ratón: la lista va siempre a la vista, bajo el pie */
@media (hover: none), (pointer: coarse) {
  .vitrina__lista { grid-row: 3; clip-path: none; visibility: visible; background: none; padding: 0 22px 20px; }
  .vitrina__lista button { opacity: 1; transform: none; color: var(--cacao); border-color: rgba(23, 2, 0, .3); position: relative; z-index: 2; }
}

/* ---------- Contacto ---------- */
.final { background: #231C1A; color: #fff; padding: 56px 0; overflow: hidden; }
.final__fila { display: flex; align-items: center; gap: 32px; }
.final__cabeza { width: 150px; height: auto; flex: none; margin: -20px 0 -64px; transform: rotate(-6deg); transition: transform .5s var(--curva); }
.final:hover .final__cabeza { transform: rotate(4deg) translateY(-6px); }
.final__texto { margin-right: auto; }
.final h2 { color: var(--naranja); font-size: clamp(34px, 3.4vw, 46px); font-weight: 850; margin: 0 0 4px; }
.final p { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.pie--inicio { background: #1C1513; }
.pie--inicio .pie__fila { display: flex; }

/* ---------- Aparición al hacer scroll ---------- */
.inicio .aparece { opacity: 0; transform: translateY(18px); }
.inicio .aparece.visto { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .oficios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oficio:nth-child(3) { padding-left: 0; border-left: 0; }
  .oficio:nth-child(n+3) { border-top: 1.5px solid var(--linea); }
}
@media (max-width: 860px) {
  .inicio { --marco: calc(100% - 32px); }
  .cab__fila { height: 64px; gap: 16px; }
  .cab__marca img { height: 46px; }
  .inicio .menu, .cab__cta { display: none; }
  .inicio .idioma { margin: 0 0 0 auto; }
  .inicio .menu-movil { margin-right: -12px; }
  .inicio .desplegable a { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }

  .portada { grid-template-columns: 1fr; min-height: 0; padding-top: 32px; }
  .portada .mascota-viva { width: 100%; margin: 0; }
  .seccion__cab { grid-template-columns: 1fr; margin-bottom: 28px; }
  .oficios, .trabajos { padding: 64px 0; }
  .oficios__lista { grid-template-columns: 1fr; }
  .escaparate { grid-template-columns: 1fr; gap: 18px; }
  .vitrina__pie { padding: 14px 16px; gap: 10px; }
  .vitrina__cuenta { display: none; }
  .vitrina__lista { padding-inline: 16px; }
  .oficio, .oficio + .oficio, .oficio:nth-child(3) { padding: 18px 0 20px; border-left: 0; }
  .oficio + .oficio { border-top: 1.5px solid var(--linea); }
  .oficio__num { margin-bottom: 8px; }


  .final { padding: 120px 0 40px; }
  .final__fila { position: relative; flex-direction: column; align-items: flex-start; gap: 24px; }
  .final__cabeza { position: absolute; top: -100px; left: 0; width: 120px; margin: 0; }
  .pie--inicio .pie__fila { flex-wrap: wrap; }
}