/* ==========================================================================
   Páginas internas: Nosotros (scrollytelling), Locales y Contacto
   ========================================================================== */

/* Filtros de chips (en el prototipo venían de tienda.css; aquí para no cargar la hoja de la tienda) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   Cabecera de página interna
   -------------------------------------------------------------------------- */
.pg-head {
  position: relative; overflow: hidden;
  color: var(--choco-950);
  padding: calc(var(--nav-h) + 72px) var(--gutter) 56px;
}
.pg-head--teal { background: var(--teal); }
.pg-head--pink { background: var(--pink); }
.pg-head__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; justify-items: start; }
.pg-head h1 { max-width: 13ch; font-size: clamp(2.8rem, 6vw, 5.4rem); }
.pg-head .lead { max-width: 40ch; font-weight: 500; }
.pg-head .filters { margin-top: 10px; }
.pg-head .chip { background: color-mix(in srgb, var(--cream) 55%, transparent); }
.pg-head .chip[aria-pressed="true"] { background: var(--choco-950); color: var(--cream); }
.pg-head__cake { position: absolute; right: -3vw; top: 22%; width: min(34vw, 460px); rotate: -8deg; z-index: 1; pointer-events: none; }
.pg-head--pink .pg-head__cake { width: min(24vw, 320px); right: 6vw; top: 26%; rotate: 10deg; }
@media (max-width: 900px) {
  .pg-head { padding: calc(var(--nav-h) + 48px) 20px 32px; }
  .pg-head__cake { width: 44vw; right: -14vw; top: 10%; }
  .pg-head--pink .pg-head__cake { width: 34vw; right: -6vw; top: 8%; }
  .pg-head h1 { padding-right: 18vw; }
}

/* --------------------------------------------------------------------------
   Locales
   -------------------------------------------------------------------------- */
.loc {
  max-width: 1340px; margin: 0 auto;
  padding: 40px var(--gutter) clamp(72px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.loc-zones { margin-bottom: 14px; }
.loc-zones[hidden] { display: none; }
.loc__count { font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.loc__stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.store {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 18px 18px 18px 16px;
  border: 0; border-radius: var(--r-surface);
  background: #fff5e4; color: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer;
  transition: box-shadow var(--dur-ui) ease, background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.store:active { transform: scale(0.99); }
.store[aria-pressed="true"] { background: var(--cream-200); box-shadow: inset 0 0 0 2px var(--choco-950); }
.store__pin { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--choco-950); font-size: 22px; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
.store[aria-pressed="true"] .store__pin { background: var(--fucsia-800); color: var(--cream); }
.store__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.05; }
.store__zone { font-size: 0.85rem; font-weight: 650; color: var(--teal-800); }
.store__addr { color: var(--ink-soft); margin-top: 4px; }
.store__name, .store__addr { display: block; }
.store__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.92rem; font-weight: 550; color: var(--ink-soft); }
.store__links { display: flex; flex-wrap: wrap; column-gap: 20px; padding-left: 74px; }
.store__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 650; }
.loc__stores li { scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (hover: hover) and (pointer: fine) { .store:not([aria-pressed="true"]):hover { background: #fff5e4; } }

.loc__map { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 10px; }
.loc__frame {
  position: relative; overflow: hidden;
  width: 100%; height: min(68vh, 620px);
  border-radius: var(--r-surface);
  background-color: var(--cream-200);
  /* Calles sugeridas: se ve como un mapa sin pedir nada a Google */
  background-image:
    linear-gradient(28deg, transparent 47%, rgba(255, 245, 228, 0.9) 47%, rgba(255, 245, 228, 0.9) 53%, transparent 53%),
    linear-gradient(-62deg, transparent 48.5%, rgba(255, 245, 228, 0.75) 48.5%, rgba(255, 245, 228, 0.75) 51.5%, transparent 51.5%),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(61, 31, 22, 0.05) 58px 60px),
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(61, 31, 22, 0.05) 74px 76px);
}
.loc__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 400ms var(--ease-out); }
.loc__frame.is-loaded iframe { opacity: 1; }
.loc__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 24px; text-align: center;
}
.loc__frame.is-loaded .loc__ph { visibility: hidden; }
.loc__ph-pin { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50% 50% 50% 0; rotate: -45deg; display: grid; place-items: center; background: var(--fucsia-800); color: var(--cream); box-shadow: 0 16px 30px -14px rgba(61, 31, 22, 0.6); }
.loc__ph-pin i { rotate: 45deg; font-size: 28px; }
.loc__ph-name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.05; color: var(--choco-950); }
.loc__ph-addr { max-width: 34ch; color: var(--ink-soft); }
.loc__ph-btn { margin-top: 12px; }
.loc__map-note { font-size: 0.92rem; color: var(--ink-soft); min-height: 1.4em; }
@media (max-width: 900px) {
  .loc { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 64px; }
  .loc__map { position: static; order: -1; }
  .loc__frame { height: 34vh; min-height: 240px; box-shadow: 0 18px 40px -24px rgba(61, 31, 22, 0.6); }
  .loc__ph { gap: 2px; padding: 16px; }
  .loc__ph-pin { width: 48px; height: 48px; margin-bottom: 6px; }
  .loc__ph-pin i { font-size: 22px; }
  .loc__ph-addr { font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .loc__ph-btn { margin-top: 8px; }
  .loc__map-note { display: none; }
  .pg-head .loc-cities { flex-wrap: nowrap; overflow-x: auto; margin: 10px -20px 0; padding: 0 20px 4px; scrollbar-width: none; width: calc(100% + 40px); }
  .pg-head .loc-cities::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.con {
  max-width: 1180px; margin: 0 auto;
  padding: 48px var(--gutter) clamp(72px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.con__form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-weight: 650; }
.field input, .field textarea {
  width: 100%; min-height: 54px;
  padding: 14px 18px;
  border: 2px solid color-mix(in srgb, var(--choco) 22%, transparent);
  border-radius: var(--r-small);
  background: #fff5e4; color: var(--choco-950);
  font: inherit; font-size: 1rem;
  transition: border-color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-800); background: #fff; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--raspberry); }
.field__error { color: #623427; font-size: 0.92rem; font-weight: 550; }
.con__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.con__req { font-size: 0.92rem; color: var(--ink-soft); }
.con__done { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px; border-radius: var(--r-surface); background: var(--pistachio); color: #3d1f16; }
.con__done[hidden] { display: none; }
.con__done i { font-size: 40px; }
.con__done h2 { font-size: 1.8rem; margin-bottom: 4px; }
.con__legal { margin-top: -6px; font-size: 0.85rem; color: var(--ink-soft); }
.con__legal a { color: inherit; text-underline-offset: 3px; }
.con__done:focus { outline: none; }
.con__alert { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 16px 18px; border-radius: var(--r-small); background: #fff5e4; color: #623427; font-weight: 550; }
.con__alert[hidden] { display: none; }
.con__alert:focus { outline: none; }
.con__alert i { font-size: 26px; color: var(--raspberry); }
.con__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.con__form { position: relative; }
.con__form .btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.con__side { background: var(--choco-950); color: var(--cream); border-radius: var(--r-surface); padding: 30px 26px; position: sticky; top: calc(var(--nav-h) + 32px); }
.con__side h2 { font-size: 2rem; margin-bottom: 18px; }
.con__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.con__side a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 8px; border-radius: var(--r-small); text-decoration: none; transition: background-color var(--dur-ui) ease; }
.con__side a i { font-size: 28px; color: var(--yellow); }
.con__side a span { display: grid; color: var(--cream-200); }
.con__side a strong { color: var(--cream); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .con__side a:hover { background: rgba(255, 245, 228, 0.08); } }
@media (max-width: 900px) {
  .con { grid-template-columns: minmax(0, 1fr); padding: 28px 16px 64px; }
  .field-row { grid-template-columns: 1fr; }
  .con__side { position: static; }
  .con__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Entradas de Locales y Contacto (CSS, sin GSAP)
   El titular y la torta nunca arrancan invisibles: solo se desplazan.
   -------------------------------------------------------------------------- */
@keyframes pg-rise { from { transform: translateY(26px); } to { transform: none; } }
@keyframes pg-fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pg-fade-rise-2 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pg-cake-in { from { transform: translateY(60px); } to { transform: none; } }
@keyframes pg-float { from { transform: translateY(0); } to { transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  :is(.locales-page, .contacto-page) .pg-head__inner > * { animation: pg-rise 800ms var(--ease-out) both; }
  :is(.locales-page, .contacto-page) .pg-head__inner > :nth-child(2) { animation-delay: 80ms; }
  :is(.locales-page, .contacto-page) .pg-head__inner > :nth-child(3) { animation-delay: 160ms; }
  :is(.locales-page, .contacto-page) .pg-head__cake { animation: pg-cake-in 1200ms var(--ease-out) 150ms both; }
  :is(.locales-page, .contacto-page) .pg-head__cake img { animation: pg-float 3.2s ease-in-out 1.4s infinite alternate; }
  .locales-page .loc__stores > li { animation: pg-fade-rise 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .locales-page .loc__stores > li.is-entering { animation-name: pg-fade-rise-2; }
  .contacto-page .con__form > .field, .contacto-page .con__form > .field-row, .contacto-page .con__actions { animation: pg-fade-rise 600ms var(--ease-out) 200ms both; }
  .contacto-page .con__form > .field-row { animation-delay: 260ms; }
  .contacto-page .con__form > .field:nth-of-type(3) { animation-delay: 320ms; }
  .contacto-page .con__form > .field:nth-of-type(4) { animation-delay: 380ms; }
  .contacto-page .con__actions { animation-delay: 440ms; }
  .contacto-page .con__side { animation: pg-fade-rise 800ms var(--ease-out) 350ms both; }
  .con__done.is-entering { animation: pg-fade-rise 500ms var(--ease-out) both; }
}

/* ==========================================================================
   Locales · diseño de oct 2026 (Locales.pdf). Medidas en px de la mesa de 1864.8 (--u).
   Cabecera turquesa con el pin 3D, ciudades en cápsulas (activa amarilla), tarjetas sin borde
   (la elegida en crema, las demás en turquesa muy claro) y el mapa a la derecha.
   ========================================================================== */
.locales-page { --u: max(calc(100vw / 1864.8), 0.62px); }
.locales-page main { background: #fff; }
.loc-head { background: #00afaf; color: #fff; min-height: calc(478 * var(--u)); padding: calc(var(--nav-h) + 20 * var(--u)) var(--gutter) calc(70 * var(--u)); overflow: hidden; }
.loc-head .pg-head__inner { max-width: none; margin: 0 0 0 calc(242 * var(--u) - var(--gutter)); gap: 0; }
.loc-head h1 { max-width: 6.2em; color: #fff; font-size: clamp(2.6rem, calc(80.2 * var(--u)), 96px); line-height: 1.05; letter-spacing: 0; }
.loc-head .lead { margin-top: calc(18 * var(--u)); max-width: none; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, calc(26.9 * var(--u)), 32px); }
.loc-head .filters { margin-top: calc(30 * var(--u)); gap: calc(10 * var(--u)); }
.loc-head .chip { min-height: calc(42 * var(--u)); padding: 0 calc(24 * var(--u)); background: rgba(255, 255, 255, 0.1); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.9rem, calc(21 * var(--u)), 25px); }
.loc-head .chip[aria-pressed="true"] { background: #ffca6c; color: #3d1f16; }
@media (hover: hover) and (pointer: fine) { .loc-head .chip:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, 0.22); } }
/* Pin un 20 % más pequeño que en el diseño (pedido del cliente), con el mismo centro */
.loc-head__pin { right: auto; left: calc(1279 * var(--u)); top: calc(26 * var(--u)); width: calc(427 * var(--u)); rotate: 0deg; }
.loc-head__pin img { animation: loc-pin-float 3.2s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes loc-pin-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .loc-head__pin img { animation: none; } }

.locales-page .loc {
  max-width: none; margin: 0;
  padding: calc(47 * var(--u)) calc(1864.8 * var(--u) - 1549 * var(--u)) calc(90 * var(--u)) calc(307 * var(--u));
  grid-template-columns: calc(534 * var(--u)) calc(648 * var(--u)); gap: calc(60 * var(--u));
}
.locales-page .loc-zones { gap: calc(5 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.locales-page .loc-zones .chip { min-width: calc(79 * var(--u)); min-height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)); justify-content: center; background: rgba(61, 31, 22, 0.06); color: #3d1f16; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.9rem, calc(21 * var(--u)), 25px); }
.locales-page .loc-zones .chip[aria-pressed="true"] { background: #41bbbe; color: #fff; }
.locales-page .loc__count { color: #3d1f16; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.95rem, calc(21 * var(--u)), 25px); margin-bottom: calc(30 * var(--u)); }
.locales-page .loc__stores { gap: calc(28 * var(--u)); }
.locales-page .store {
  min-height: calc(118 * var(--u)); padding: calc(18 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u));
  grid-template-columns: calc(32 * var(--u)) 1fr; gap: calc(20 * var(--u)); align-items: center;
  border-radius: calc(22 * var(--u)); background: #f5fcfc; box-shadow: none;
}
.locales-page .store[aria-pressed="true"] { background: #fff4e2; box-shadow: none; }
.locales-page .store__pin, .locales-page .store[aria-pressed="true"] .store__pin { width: auto; height: auto; background: none; color: #41bbbe; font-size: clamp(22px, calc(34 * var(--u)), 40px); }
.locales-page .store__zone { color: #3d1f16; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.8rem, calc(17.5 * var(--u)), 21px); }
.locales-page .store__name { color: #41bbbe; font-weight: 700; font-size: clamp(1.2rem, calc(26.9 * var(--u)), 32px); }
.locales-page .store__addr { color: #3d1f16; font-family: var(--font-display); font-size: clamp(0.85rem, calc(17.5 * var(--u)), 21px); margin-top: calc(6 * var(--u)); }
.locales-page .store__meta { display: none; }
@media (hover: hover) and (pointer: fine) { .locales-page .store:not([aria-pressed="true"]):hover { background: #e8f7f7; } }
.locales-page .loc__map { top: calc(var(--nav-h) + 24px); }
.locales-page .loc__frame { height: calc(423 * var(--u)); min-height: 340px; border-radius: calc(26 * var(--u)); background-color: #ffe9c7; }
.locales-page .loc__ph-name { color: #3d1f16; }
.locales-page .loc__ph-addr { color: #3d1f16; }
.locales-page .loc__ph-btn { --btn-bg: #623427; }
@media (max-width: 900px) {
  .loc-head { padding: calc(var(--nav-h) + 32px) 20px 28px; min-height: 0; }
  .loc-head .pg-head__inner { margin: 0; }
  .loc-head h1 { padding-right: 0; }
  .loc-head__pin { left: auto; right: -6vw; top: calc(var(--nav-h) + 4px); width: 32vw; }
  .locales-page .loc { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 64px; gap: 20px; }
  .locales-page .store { min-height: 0; padding: 16px; grid-template-columns: 28px 1fr; gap: 14px; border-radius: 18px; }
}

/* ==========================================================================
   Contacto · diseño de oct 2026 (Contactanos.pdf). Medidas en px de la mesa de 1864.8 (--u).
   Cabecera amarilla con redes en círculos blancos y la mano con el celular; abajo, blanco con
   la textura de tortas, el formulario con campos suaves y la tarjeta turquesa "También por aquí".
   ========================================================================== */
.contacto-page { --u: max(calc(100vw / 1864.8), 0.62px); }
.con-head { position: relative; background: #ffca6c; color: #3d1f16; min-height: calc(523 * var(--u)); padding: max(calc(var(--nav-h) + 12px), calc(122 * var(--u))) var(--gutter) calc(70 * var(--u)); overflow: hidden; }
.con-head .pg-head__inner { max-width: none; margin: 0 0 0 calc(302 * var(--u) - var(--gutter)); gap: 0; justify-items: start; }
.con-head h1 { max-width: none; font-weight: 500; font-size: clamp(2.6rem, calc(80.2 * var(--u)), 96px); line-height: 0.86; letter-spacing: 0; color: #3d1f16; }
.con-head h1 > * { display: block; }
.con-head h1 strong { font-weight: 600; }
.con-head .lead { margin-top: calc(48 * var(--u)); max-width: 15.5em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, calc(26.9 * var(--u)), 32px); line-height: 1.22; color: #3d1f16; }
.con-head__social { position: absolute; z-index: 2; left: calc(1051 * var(--u)); top: calc(112 * var(--u)); margin: 0; padding: 0; list-style: none; display: flex; gap: calc(10 * var(--u)); }
.con-head__social a {
  width: clamp(40px, calc(62 * var(--u)), 72px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #ffca6c;
  font-size: clamp(20px, calc(32 * var(--u)), 38px); text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.con-head__social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .con-head__social a:hover { background: #3d1f16; color: #ffca6c; transform: translateY(-3px); } }
.con-head__hand { position: absolute; z-index: 1; left: calc(976 * var(--u)); bottom: 0; width: calc(889 * var(--u)); pointer-events: none; }
.con-head__hand img { display: block; width: 100%; height: auto; }

.contacto-page main > .con-wrap, .contacto-page .con { position: relative; }
.contacto-page main { background: #fff url("../img/home/hero-fondo.webp") center top / 100% auto repeat-y; }
.contacto-page .con {
  max-width: none; margin: 0;
  padding: calc(56 * var(--u)) calc(1864.8 * var(--u) - 1467 * var(--u)) calc(110 * var(--u)) calc(386 * var(--u));
  grid-template-columns: calc(636 * var(--u)) calc(380 * var(--u)); gap: calc(65 * var(--u));
}
.contacto-page .con__form { gap: calc(26 * var(--u)); }
.contacto-page .field { gap: calc(12 * var(--u)); }
.contacto-page .field-row { gap: calc(20 * var(--u)); }
.contacto-page .field label { font-family: var(--font-display); font-weight: 400; font-size: clamp(0.85rem, calc(17.5 * var(--u)), 21px); color: #3d1f16; }
.contacto-page .field input, .contacto-page .field textarea {
  min-height: calc(60 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u));
  border: 2px solid transparent; border-radius: calc(12 * var(--u));
  background: rgba(61, 31, 22, 0.1); box-shadow: none;
  font-family: var(--font-display); font-size: clamp(0.95rem, calc(20 * var(--u)), 24px); color: #3d1f16;
}
.contacto-page .field textarea { min-height: calc(150 * var(--u)); }
.contacto-page .field input:focus, .contacto-page .field textarea:focus { border-color: #41bbbe; background: #fff; }
.contacto-page .con__actions { margin-top: calc(14 * var(--u)); gap: calc(14 * var(--u)); }
.contacto-page .con__actions .btn { --btn-bg: #41bbbe; --btn-ink: #fff; min-height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); font-family: var(--font-display); font-weight: 400; font-size: clamp(0.95rem, calc(18.7 * var(--u)), 22px); }
@media (hover: hover) and (pointer: fine) { .contacto-page .con__actions .btn:hover { --btn-bg: #119393; } }
.contacto-page .con__req, .contacto-page .con__legal { font-family: var(--font-display); color: #3d1f16; font-size: clamp(0.75rem, calc(13.9 * var(--u)), 17px); }
.contacto-page .con__legal { margin-top: calc(4 * var(--u)); }
.contacto-page .con__side {
  top: calc(var(--nav-h) + 24px); min-height: calc(429 * var(--u));
  padding: calc(52 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) calc(70 * var(--u));
  border-radius: calc(24 * var(--u)); background: rgba(65, 187, 190, 0.12); color: #3d1f16;
}
.contacto-page .con__side h2 { font-weight: 500; font-size: clamp(1.5rem, calc(36.2 * var(--u)), 44px); color: #3d1f16; margin-bottom: calc(26 * var(--u)); }
.contacto-page .con__side ul { gap: calc(8 * var(--u)); }
.contacto-page .con__side a { grid-template-columns: calc(26 * var(--u) + 6px) 1fr; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) 0; color: #3d1f16; }
.contacto-page .con__side a i { color: #41bbbe; font-size: clamp(18px, calc(24 * var(--u)), 28px); }
.contacto-page .con__side strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(0.95rem, calc(20.6 * var(--u)), 25px); line-height: 1.15; }
.contacto-page .con__side span { font-family: var(--font-display); font-size: clamp(0.85rem, calc(19 * var(--u)), 23px); line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .contacto-page .con__side a:hover { background: transparent; } .contacto-page .con__side a:hover strong { text-decoration: underline; text-underline-offset: 3px; } }

@media (max-width: 900px) {
  .con-head { min-height: 0; padding: calc(var(--nav-h) + 28px) 20px 0; }
  .con-head .pg-head__inner { margin: 0; }
  .con-head__social { position: relative; left: auto; top: auto; margin-top: 22px; }
  .con-head__hand { position: relative; left: auto; display: block; width: 92%; margin: 10px -20px 0 auto; }
  .contacto-page .con { grid-template-columns: minmax(0, 1fr); padding: 32px 18px 64px; gap: 28px; }
  .contacto-page .con__side { position: static; padding: 26px 22px; }
}
/* Ajustes con el arte: la mano asoma desde abajo (recortada por la cabecera), campos más juntos
   y textos de la tarjeta en café (el estilo anterior los dejaba en crema). */
.con-head__hand { top: calc(223 * var(--u)); bottom: auto; }
.contacto-page .con__form { gap: calc(22 * var(--u)); }
.contacto-page .field { gap: calc(7 * var(--u)); }
.contacto-page .field label { line-height: 1.2; }
.contacto-page .field input { height: calc(60 * var(--u)); min-height: 40px; }
.contacto-page .field textarea { height: calc(150 * var(--u)); min-height: 110px; }
.contacto-page .con__side a, .contacto-page .con__side a span, .contacto-page .con__side a strong { color: #3d1f16; }
.contacto-page .con__side a > span { display: grid; gap: 2px; }
@media (max-width: 900px) {
  .con-head__hand { top: auto; }
}
.con-head__hand { left: calc(1000 * var(--u)); width: calc(865 * var(--u)); }
@media (max-width: 900px) {
  .con-head__hand { position: relative; left: auto; top: auto; display: block; width: 100%; margin: 18px -20px 0 auto; }
}

/* Contacto · entrada (16 oct): la mano entra desde la derecha, los íconos salen del celular uno tras
   otro hasta su lugar, el título sube línea por línea y luego el texto. Después, todo queda flotando suave.
   Las animaciones van en elementos internos (li, img, span) para no pisar la posición de sus contenedores. */
@media (prefers-reduced-motion: no-preference) {
  .con-head__hand img { transform-origin: 85% 90%; animation: con-hand-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards, con-hand-sway 4.2s ease-in-out 1.4s infinite alternate; }
  .con-head__social li { animation: con-fly 900ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards, con-bob 3.4s ease-in-out infinite alternate; }
  .con-head__social li:nth-child(1) { --fx: 160px; animation-delay: 0.75s, 1.8s; }
  .con-head__social li:nth-child(2) { --fx: 110px; animation-delay: 0.85s, 2.1s; }
  .con-head__social li:nth-child(3) { --fx: 60px; animation-delay: 0.95s, 2.4s; }
  .con-head__social li:nth-child(4) { --fx: 10px; animation-delay: 1.05s, 2.7s; }
  .con-head__social li:nth-child(5) { --fx: -40px; animation-delay: 1.15s, 3s; }
  .con-head h1 > * { animation: con-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .con-head h1 > :nth-child(1) { animation-delay: 0.15s; }
  .con-head h1 > :nth-child(2) { animation-delay: 0.27s; }
  .con-head h1 > :nth-child(3) { animation-delay: 0.39s; }
  .con-head .lead { animation: con-fade 0.8s ease-out 0.6s backwards; }
}
@keyframes con-fly { from { opacity: 0; transform: translate(var(--fx, 60px), 150px) scale(0.2) rotate(-25deg); } 60% { opacity: 1; } }
@keyframes con-bob { to { transform: translateY(-6px); } }
@keyframes con-line { from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); } }
@keyframes con-fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes con-hand-in { from { opacity: 0; transform: translateX(22%) rotate(6deg); } }
@keyframes con-hand-sway { from { transform: rotate(0deg) translateY(0); } to { transform: rotate(-1.6deg) translateY(-8px); } }
@media (max-width: 900px) {
  .con-head__social li { --fx: 0px !important; }
  @keyframes con-fly { from { opacity: 0; transform: translateY(30px) scale(0.4); } 60% { opacity: 1; } }
}
/* Celular (16 oct): cabecera de Contacto centrada; la mano sale desde el borde derecho de la pantalla */
@media (max-width: 900px) {
  .con-head { text-align: center; padding-bottom: 0; }
  .con-head .pg-head__inner { justify-items: center; }
  .con-head .lead { margin-left: auto; margin-right: auto; }
  .con-head__social { justify-content: center; }
  .con-head__hand { width: calc(100% + 20px); margin: 22px -20px 0 0; }
}
@media (max-width: 900px) { .con-head h1 { padding-right: 0; } }

/* ==========================================================================
   Trabaja con nosotros (20 oct 2026). Usa la base de Contacto (.contacto-page, .con, .field);
   aquí van la cabecera turquesa con la planta, el menú de área, la caja del CV, la casilla
   y la tarjeta con los pasos del proceso.
   ========================================================================== */
.job-head { position: relative; background: #41bbbe; color: #3d1f16; min-height: calc(500 * var(--u)); padding: max(calc(var(--nav-h) + 12px), calc(122 * var(--u))) var(--gutter) calc(70 * var(--u)); overflow: hidden; }
.job-head .pg-head__inner { max-width: none; margin: 0 0 0 calc(302 * var(--u) - var(--gutter)); gap: 0; justify-items: start; }
.job-head h1 { max-width: 9.5em; font-weight: 500; font-size: clamp(2.6rem, calc(80.2 * var(--u)), 96px); line-height: 0.9; letter-spacing: 0; color: #3d1f16; }
.job-head h1 > * { display: block; }
.job-head h1 strong { font-weight: 600; color: #fff5e4; }
.job-head .lead { margin-top: calc(40 * var(--u)); max-width: 17em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, calc(26.9 * var(--u)), 32px); line-height: 1.22; color: #3d1f16; }
.job-head__art { position: absolute; z-index: 1; right: calc(150 * var(--u)); top: 50%; width: calc(720 * var(--u)); translate: 0 -42%; pointer-events: none; }
.job-head__art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(17, 147, 147, 0.45)); }

.contacto-page .field select {
  width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer;
  min-height: calc(60 * var(--u)); height: calc(60 * var(--u)); min-height: 40px; padding: calc(14 * var(--u)) calc(48 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  border: 2px solid transparent; border-radius: calc(12 * var(--u)); background: rgba(61, 31, 22, 0.1);
  font-family: var(--font-display); font-size: clamp(0.95rem, calc(20 * var(--u)), 24px); color: #3d1f16;
}
.contacto-page .field select:focus { outline: none; border-color: #41bbbe; background: #fff; }
.field__select { position: relative; }
.field__select i { position: absolute; right: calc(16 * var(--u)); top: 50%; translate: 0 -50%; font-size: 22px; color: #623427; pointer-events: none; }
.field.is-invalid select, .field.is-invalid .file-drop { border-color: var(--raspberry); }
.contacto-page .field textarea::placeholder { color: rgba(61, 31, 22, 0.5); }
.field__label { font-family: var(--font-display); font-size: clamp(0.85rem, calc(17.5 * var(--u)), 21px); color: #3d1f16; line-height: 1.2; }

.file-drop {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: calc(16 * var(--u)); align-items: center;
  padding: calc(20 * var(--u)) calc(24 * var(--u)); min-height: 86px;
  border: 2px dashed rgba(65, 187, 190, 0.7); border-radius: calc(14 * var(--u)); background: rgba(65, 187, 190, 0.08);
  cursor: pointer; transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease;
}
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop__icon { font-size: clamp(30px, calc(40 * var(--u)), 44px); color: #119393; }
.file-drop__text { display: grid; gap: 2px; font-family: var(--font-display); color: #3d1f16; min-width: 0; }
.file-drop__name { font-weight: 500; font-size: clamp(1rem, calc(20 * var(--u)), 24px); overflow-wrap: anywhere; }
.file-drop__text > span { font-size: clamp(0.8rem, calc(15 * var(--u)), 18px); color: #623427; }
.file-drop.is-over, .file-drop:focus-within { background: rgba(65, 187, 190, 0.18); border-color: #119393; }
.file-drop.has-file { border-style: solid; border-color: #41bbbe; background: #fff; }
@media (hover: hover) and (pointer: fine) { .file-drop:hover { background: rgba(65, 187, 190, 0.16); } }

.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-family: var(--font-display); font-size: clamp(0.85rem, calc(16 * var(--u)), 19px); line-height: 1.3; color: #3d1f16; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #119393; cursor: pointer; }
.check a { color: inherit; text-underline-offset: 3px; }
.field--check.is-invalid .check input { outline: 2px solid var(--raspberry); outline-offset: 2px; }

.job__side { background: rgba(255, 202, 108, 0.28) !important; }
.job__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(18 * var(--u)); counter-reset: paso; }
.job__steps li { display: grid; grid-template-columns: calc(30 * var(--u) + 14px) 1fr; gap: calc(12 * var(--u)); align-items: start; font-family: var(--font-display); color: #3d1f16; font-size: clamp(0.85rem, calc(18 * var(--u)), 22px); line-height: 1.25; }
.job__steps li > span { display: grid; gap: 2px; }
.job__steps i { font-size: clamp(22px, calc(30 * var(--u)), 34px); color: #f78b16; }
.job__steps strong { font-weight: 500; font-size: clamp(0.95rem, calc(20.6 * var(--u)), 25px); }
.job__note { margin-top: calc(26 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid rgba(61, 31, 22, 0.15); font-family: var(--font-display); font-size: clamp(0.8rem, calc(15 * var(--u)), 18px); color: #623427; }

@media (prefers-reduced-motion: no-preference) {
  .job-head h1 > * { animation: con-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .job-head h1 > :nth-child(2) { animation-delay: 0.12s; }
  .job-head .lead { animation: con-fade 0.8s ease-out 0.45s backwards; }
  .job-head__art img { animation: job-art-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards, job-art-float 5s ease-in-out 1.3s infinite alternate; }
}
@keyframes job-art-in { from { opacity: 0; transform: translateY(40px) scale(0.92); } }
@keyframes job-art-float { to { transform: translateY(-10px); } }

@media (max-width: 900px) {
  .job-head { min-height: 0; padding: calc(var(--nav-h) + 28px) 20px 24px; text-align: center; }
  .job-head .pg-head__inner { margin: 0; justify-items: center; }
  .job-head h1 { margin: 0 auto; }
  .job-head .lead { margin-left: auto; margin-right: auto; }
  .job-head__art { position: relative; right: auto; top: auto; translate: none; display: block; width: min(92%, 460px); margin: 18px auto 0; }
  .file-drop { padding: 16px; }
  .file-drop__icon { font-size: 30px; }
}
/* Ajustes del formulario (20 oct): borde de error visible en los campos suaves (también en Contacto),
   y la casilla y el archivo sin las medidas de los campos de texto. */
.contacto-page .field.is-invalid input, .contacto-page .field.is-invalid textarea, .contacto-page .field.is-invalid select { border-color: #623427; }
.contacto-page .field .check input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: none; }
.contacto-page .field .file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; }
.contacto-page .field.is-invalid .file-drop { border-color: #623427; }
.contacto-page .field--check.is-invalid .check input { outline: 2px solid #623427; outline-offset: 3px; }