/* =====================================================================
   Capa de estilo iOS para Teslize (30/09/2026)
   Mismos colores de marca (amarillo #FFAA24, negro, crema y blanco) con formas,
   tipografía y movimiento de iOS. Hoja aditiva: se carga la última y no toca
   componentes. Solo actúa con la clase customer-teslize, que pone el script de
   cabecera en /web/teslize/ y en cuenta/pago con ?origen=teslize.
   El prefijo :root.customer-teslize:not(#tz-ios-x) sube la especificidad para
   ganar a las hojas de parches sin tener que editarlas.
   ===================================================================== */
@font-face{font-family:"EP iOS Sans";src:url(/web/fonts/eperformance-ios-inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root.customer-teslize:not(#tz-ios-x){
  --tz-y:#ffaa24;--tz-y-press:#f29a10;--tz-y-soft:#ffd388;--tz-y-tint:#fff3dc;
  --tz-ink:#111;--tz-tx2:rgba(17,17,17,.64);--tz-tx3:rgba(17,17,17,.46);
  --tz-cream:#f5f1e9;--tz-paper:#fff;--tz-fill:rgba(17,17,17,.05);--tz-fill2:rgba(17,17,17,.08);--tz-sep:rgba(17,17,17,.12);
  --tz-dark:#1c1c1e;--tz-dark2:#2c2c2e;--tz-dtx2:rgba(235,235,245,.66);--tz-dsep:rgba(84,84,88,.6);
  --tz-sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","EP iOS Sans","Instrument Sans",system-ui,sans-serif;
  --tz-sfd:-apple-system,BlinkMacSystemFont,"SF Pro Display","EP iOS Sans","Instrument Sans",system-ui,sans-serif;
  --tz-r:24px;--tz-r-m:20px;--tz-r-s:14px;--tz-r-f:12px;
  --tz-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07);
  --tz-shadow-h:0 2px 6px rgba(0,0,0,.06),0 22px 48px rgba(0,0,0,.13);
  --tz-spring:cubic-bezier(.34,1.45,.64,1);--tz-ease:cubic-bezier(.32,.72,0,1);
  --font-display:var(--tz-sfd);--font-sans:var(--tz-sf);
  -webkit-tap-highlight-color:transparent
}

/* ---------- tipografía SF ---------- */
:root.customer-teslize:not(#tz-ios-x) body,
:root.customer-teslize:not(#tz-ios-x) .commerce-home{font-family:var(--tz-sf)!important;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root.customer-teslize:not(#tz-ios-x) .commerce-home :is(p,span,a,button,li,label,input,select,textarea,strong,small,b,em,figcaption,dt,dd,summary){font-family:inherit}
:root.customer-teslize:not(#tz-ios-x) .commerce-home :is(h1,h2,h3,h4){font-family:var(--tz-sfd)!important;font-weight:700!important;letter-spacing:-.035em!important;font-stretch:normal!important}
/* SF es más ancha que la condensada original: tamaños a ~70 % */
:root.customer-teslize:not(#tz-ios-x) .commerce-hero-copy h1{font-size:clamp(44px,5.6vw,80px)!important;line-height:1!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-page-hero h1{font-size:clamp(42px,6vw,84px)!important;line-height:1!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-detail-copy h1{font-size:clamp(36px,4.3vw,62px)!important;line-height:1.02!important}
:root.customer-teslize:not(#tz-ios-x) .commerce-home :is(.landing-finder-intro,.commerce-section-head,.teslize-section-heading,.teslize-configurator-intro,.teslize-product-story,.teslize-contact-context,.teslize-cross-nav,.teslize-model-shortcuts,.teslize-visit,.ep-visit,.commerce-contact-copy,.tesla-workshop-copy,.home-pickup-copy) h2{font-size:clamp(30px,3.7vw,56px)!important;line-height:1.04!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-final-cta h2{font-size:clamp(34px,4.6vw,66px)!important;line-height:1.02!important}
:root.customer-teslize:not(#tz-ios-x) .commerce-home :is(.teslize-generation-grid,.teslize-process-grid) h3,
:root.customer-teslize:not(#tz-ios-x) .teslize-value-card h3,
:root.customer-teslize:not(#tz-ios-x) .ep-guided-contact h3{font-size:clamp(22px,2vw,28px)!important;line-height:1.12!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-model-grid h3{font-size:clamp(24px,2.3vw,32px)!important}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-list-card,.tesla-product-card) h3{font-size:17.5px!important;line-height:1.25!important;letter-spacing:-.02em!important;font-weight:650!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-workflow li h3{font-size:20px!important;line-height:1.2!important}
/* rótulos pequeños en versalitas → estilo cabecera de sección de iOS */
:root.customer-teslize:not(#tz-ios-x) :is(.commerce-kicker,.teslize-detail-copy>p,.teslize-section-heading>p,.teslize-configurator-intro>p,.teslize-configurator-total>span,.tesla-model-grid p,.teslize-breadcrumb){font-family:var(--tz-sf)!important;font-weight:600!important;letter-spacing:.04em!important}

/* ---------- barra de aviso y cabecera (barra de navegación de iOS) ---------- */
:root.customer-teslize:not(#tz-ios-x) .solar-announcement{min-height:32px;font:600 12px/1.2 var(--tz-sf)!important;letter-spacing:.02em!important}
:root.customer-teslize:not(#tz-ios-x) .landing-header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-bottom:.5px solid var(--tz-sep)!important;box-shadow:none!important}
:root.customer-teslize:not(#tz-ios-x) .landing-desktop-nav a{font:500 15px/1 var(--tz-sf)!important;letter-spacing:-.01em!important;color:var(--tz-tx2)!important;transition:color .2s}
@media (hover:hover){:root.customer-teslize:not(#tz-ios-x) .landing-desktop-nav a:hover{color:var(--tz-ink)!important}}
:root.customer-teslize:not(#tz-ios-x) .landing-icon-button{border-radius:50%!important;transition:background-color .2s,transform .45s var(--tz-spring)}
@media (hover:hover){:root.customer-teslize:not(#tz-ios-x) .landing-icon-button:hover{background:var(--tz-fill2)!important}}
:root.customer-teslize:not(#tz-ios-x) .landing-header .ep-contact-links a{border-radius:999px!important;font:600 14px/1 var(--tz-sf)!important}
:root.customer-teslize:not(#tz-ios-x) .landing-header-quote{min-height:40px;padding:0 18px!important;border-radius:999px!important;font:600 14.5px/1 var(--tz-sf)!important;letter-spacing:-.01em!important}
:root.customer-teslize:not(#tz-ios-x) .landing-panel{border-radius:28px!important;overflow:hidden;background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--tz-sep)!important;box-shadow:0 24px 60px rgba(0,0,0,.18)!important}

/* ---------- botones en píldora ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.landing-primary,.landing-secondary,.solar-hero-phone,.teslize-primary-action,.teslize-secondary-action,.tesla-products-all,.teslize-configurator-actions>*,.teslize-detail-actions>a,.teslize-final-cta a,.teslize-visit a,.ep-visit a,.commerce-contact .ep-contact-links a,.teslize-contact-layout .ep-contact-links a,.shop-footer--teslize .ep-contact-links a,.cart-empty-cta,.cart-quote-submit,.ep-quick-submit,.ep-guided-contact button[type=submit],.tesla-workshop a){border-radius:999px!important;font-family:var(--tz-sf)!important;font-weight:600!important;letter-spacing:-.01em!important;transition:transform .45s var(--tz-spring),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-primary-action,.landing-primary){box-shadow:0 8px 20px rgba(0,0,0,.14)}
:root.customer-teslize:not(#tz-ios-x) :is(.landing-primary,.landing-secondary,.solar-hero-phone,.teslize-primary-action,.teslize-secondary-action,.tesla-products-all,.teslize-configurator-actions>*,.teslize-detail-actions>a,.teslize-final-cta a,.teslize-visit a,.ep-visit a,.cart-empty-cta,.cart-quote-submit,.ep-guided-contact button[type=submit],.landing-header-quote):active{transform:scale(.965)!important;transition-duration:.12s}
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-actions>button:disabled{opacity:.45;box-shadow:none}

/* ---------- chips de filtro (control segmentado) ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-filters,.teslize-generation-options) button{min-height:34px;padding:0 14px!important;border-radius:999px!important;border:1px solid var(--tz-sep)!important;background:var(--tz-paper)!important;color:var(--tz-ink)!important;font:600 13.5px/1 var(--tz-sf)!important;letter-spacing:-.01em!important;transition:background-color .25s var(--tz-ease),border-color .25s,transform .45s var(--tz-spring)}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-filters,.teslize-generation-options) button[aria-pressed="true"]{background:var(--tz-y)!important;border-color:var(--tz-y)!important;color:#111!important;box-shadow:0 4px 12px rgba(255,170,36,.35)}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-filters,.teslize-generation-options) button:active{transform:scale(.95)}
:root.customer-teslize:not(#tz-ios-x) .teslize-filters{border-radius:var(--tz-r)!important;border:0!important;box-shadow:var(--tz-shadow)!important;overflow:hidden}
:root.customer-teslize:not(#tz-ios-x) .teslize-filters>div>span,:root.customer-teslize:not(#tz-ios-x) .teslize-generation-row>span{font:600 12px/1 var(--tz-sf)!important;letter-spacing:.04em!important;color:var(--tz-tx3)!important}

/* ---------- campos de iOS ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.commerce-home,.cuenta-main,.shop-main) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select:not(.ep-native-proxy),textarea,.ep-soft-select){letter-spacing:-.01em!important;border-radius:var(--tz-r-f)!important;border:1px solid rgba(17,17,17,.16)!important;background-color:var(--tz-paper)!important;font-family:var(--tz-sf)!important;font-size:16px;transition:border-color .2s,box-shadow .2s}
:root.customer-teslize:not(#tz-ios-x) :is(.commerce-home,.cuenta-main,.shop-main) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea,.ep-soft-select):focus-visible,
:root.customer-teslize:not(#tz-ios-x) :is(.commerce-home,.cuenta-main,.shop-main) :where(input,textarea):focus{outline:0!important;border-color:var(--tz-y)!important;box-shadow:0 0 0 4px rgba(255,170,36,.3)!important}
:root.customer-teslize:not(#tz-ios-x) .commerce-home .ep-soft-select[aria-expanded="true"]{border-color:var(--tz-y)!important;box-shadow:0 0 0 4px rgba(255,170,36,.25)!important}
:root.customer-teslize:not(#tz-ios-x) .ep-soft-options{border-radius:18px!important;overflow:hidden;border:1px solid var(--tz-sep)!important;box-shadow:0 20px 50px rgba(0,0,0,.18)!important;background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
:root.customer-teslize:not(#tz-ios-x) .commerce-home :is(input[type=checkbox],input[type=radio]){accent-color:var(--tz-y)}

/* ---------- buscador de modelo (lista agrupada) ---------- */
:root.customer-teslize:not(#tz-ios-x) .tesla-finder .ep-soft-select{border:0!important;box-shadow:none!important;background-color:transparent!important;padding-left:0!important;border-radius:10px!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder .ep-soft-select[aria-expanded="true"],:root.customer-teslize:not(#tz-ios-x) .tesla-finder .ep-soft-select:focus-visible{background-color:var(--tz-fill)!important;box-shadow:none!important}
:root.customer-teslize:not(#tz-ios-x) .vehicle-finder-head span{border-radius:8px!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder{border-radius:var(--tz-r)!important;border:0!important;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.12)!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder :is(button[type=submit],.vehicle-finder-submit){border-radius:16px!important;margin:8px!important;transition:transform .45s var(--tz-spring),background-color .2s}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder :is(button[type=submit],.vehicle-finder-submit):active{transform:scale(.97)}

/* ---------- rejillas con líneas → tarjetas agrupadas separadas ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-model-grid,.teslize-generation-grid,.teslize-process-grid){gap:14px!important;background:transparent!important;border:0!important}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-model-grid,.teslize-generation-grid,.teslize-process-grid)>*{border-radius:var(--tz-r)!important;overflow:hidden;border:0!important;box-shadow:var(--tz-shadow)}
:root.customer-teslize:not(#tz-ios-x) .tesla-model-grid>a{transition:transform .5s var(--tz-spring),box-shadow .3s}
@media (hover:hover){:root.customer-teslize:not(#tz-ios-x) .tesla-model-grid>a:hover{transform:translateY(-4px);box-shadow:var(--tz-shadow-h)}}
:root.customer-teslize:not(#tz-ios-x) .teslize-generations .teslize-generation-grid>*{background:var(--tz-cream)!important;box-shadow:none}
:root.customer-teslize:not(#tz-ios-x) .teslize-product-info .teslize-process-grid>*{background:var(--tz-paper)!important}
/* navegación entre modelos (en bloques amarillos) */
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-cross-nav,.teslize-model-shortcuts) nav{gap:12px!important;background:transparent!important;border:0!important}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-cross-nav,.teslize-model-shortcuts) nav>*{border-radius:var(--tz-r-m)!important;border:0!important;background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color .25s,transform .45s var(--tz-spring)}
@media (hover:hover){:root.customer-teslize:not(#tz-ios-x) :is(.teslize-cross-nav,.teslize-model-shortcuts) nav>*:hover{background:#fff!important;transform:translateY(-2px)}}
:root.customer-teslize:not(#tz-ios-x) .teslize-compatible-models nav{gap:12px!important;background:transparent!important;border:0!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-compatible-models nav>*{border-radius:var(--tz-r-m)!important;border:0!important;background:var(--tz-dark)!important}

/* ---------- tarjetas de producto ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card){border-radius:var(--tz-r)!important;overflow:hidden;border:0!important;box-shadow:var(--tz-shadow);transition:transform .5s var(--tz-spring),box-shadow .3s}
@media (hover:hover){:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card):hover{transform:translateY(-4px);box-shadow:var(--tz-shadow-h)}}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card):active{transform:scale(.975);transition-duration:.12s}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card) figure>span,
:root.customer-teslize:not(#tz-ios-x) .teslize-list-card>span,:root.customer-teslize:not(#tz-ios-x) .teslize-list-card figure span{border-radius:999px!important;padding:4px 10px!important;font:700 10.5px/1.3 var(--tz-sf)!important;letter-spacing:.04em!important}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card) footer{border-top:.5px solid var(--tz-sep)!important}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card) footer strong{font-family:var(--tz-sfd)!important;font-weight:700!important;letter-spacing:-.02em!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-product-list :is(.teslize-list-card){box-shadow:0 1px 0 rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.45)}

/* ---------- héroes: la foto como tarjeta redondeada dentro del bloque amarillo ---------- */
:root.customer-teslize:not(#tz-ios-x) .teslize-detail-media{clip-path:inset(18px 18px 18px 0 round 28px)}
:root.customer-teslize:not(#tz-ios-x) .teslize-detail-media img{transition:scale 1.2s var(--tz-ease)}
:root.customer-teslize:not(#tz-ios-x) .teslize-price{font-family:var(--tz-sfd)!important;font-weight:700!important;letter-spacing:-.03em!important}

/* ---------- configurador ---------- */
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator{border-top:0!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-panel{border-radius:28px!important;box-shadow:var(--tz-shadow);overflow:hidden}
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-total{border:0!important;border-radius:var(--tz-r-m)!important;background:var(--tz-cream)!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-total strong{font-family:var(--tz-sfd)!important;font-weight:700!important;letter-spacing:-.035em!important}

/* ---------- taller, proceso y valor ---------- */
:root.customer-teslize:not(#tz-ios-x) .teslize-value-card{border:0!important;border-radius:var(--tz-r)!important;overflow:hidden;background:var(--tz-paper)!important;box-shadow:var(--tz-shadow)}
:root.customer-teslize:not(#tz-ios-x) .teslize-value-card__proof{border:0!important;border-top:.5px solid var(--tz-sep)!important;background:var(--tz-fill)!important}
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-workshop-media-shot,.tesla-workshop-media,.teslize-workshop-media-shot img){border-radius:var(--tz-r-m)!important;overflow:hidden}
:root.customer-teslize:not(#tz-ios-x) .teslize-workflow ol{gap:12px!important;border:0!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-workflow ol>li{border:0!important;border-radius:var(--tz-r-m)!important;background:var(--tz-dark)!important;padding:22px!important}
:root.customer-teslize:not(#tz-ios-x) .home-pickup-shell{border-radius:32px!important;border-color:rgba(255,170,36,.3)!important;overflow:hidden}
:root.customer-teslize:not(#tz-ios-x) .home-pickup-facts{border-radius:var(--tz-r-m)!important;border-color:rgba(255,255,255,.1)!important}

/* ---------- contacto ---------- */
:root.customer-teslize:not(#tz-ios-x) .ep-guided-contact.ep-quick-contact{border:0!important;border-radius:28px!important;box-shadow:0 20px 50px rgba(0,0,0,.1)!important}
:root.customer-teslize:not(#tz-ios-x) .ep-quick-guided{border-radius:var(--tz-r-s)!important;border-color:var(--tz-sep)!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-contact-layout aside,:root.customer-teslize:not(#tz-ios-x) .ep-opening-hours{border-radius:var(--tz-r-m)!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-contact-context ol{border-radius:var(--tz-r-m)!important;overflow:hidden}

/* ---------- pie ---------- */
:root.customer-teslize:not(#tz-ios-x) .shop-footer--teslize{font-family:var(--tz-sf)!important}
:root.customer-teslize:not(#tz-ios-x) .shop-footer--teslize :is(input,button){border-radius:999px!important}

/* ---------- cesta, hojas y avisos ---------- */
:root.customer-teslize:not(#tz-ios-x) .cart-drawer{border-radius:28px 0 0 28px!important;overflow:hidden;box-shadow:-20px 0 60px rgba(0,0,0,.18)!important;transition-timing-function:var(--tz-ease)!important;transition-duration:.5s!important}
:root.customer-teslize:not(#tz-ios-x) :is(.cart-quote-card,.ep-cookie-placeholder,#ep-cookie-settings){border-radius:28px!important;overflow:hidden}
/* 01/10: el checkout tiene que poder desplazarse (overflow:hidden lo bloqueaba y el botón de pago quedaba fuera de pantalla) */
:root.customer-teslize:not(#tz-ios-x) .cart-quote-card{overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
:root.customer-teslize:not(#tz-ios-x) :is(.cart-payment-panel,.checkout-account,.cart-quote-summary,.cart-dev-badge){border-radius:var(--tz-r-m)!important}
:root.customer-teslize:not(#tz-ios-x) .cart-payment-option{border-radius:16px!important}
:root.customer-teslize:not(#tz-ios-x) :is(.cart-drawer-close,.cart-item-remove){border-radius:50%!important}
:root.customer-teslize:not(#tz-ios-x) .checkout-commerce{border-radius:var(--tz-r-s)!important;border-width:0 0 0 4px!important}
:root.customer-teslize:not(#tz-ios-x) #ep-cookie-banner{border-radius:24px!important;overflow:hidden}
:root.customer-teslize:not(#tz-ios-x) #ep-cookie-banner button,:root.customer-teslize:not(#tz-ios-x) #ep-cookie-settings button{border-radius:999px!important}

/* ---------- cuenta y pago cuando el cliente viene de Teslize (?origen=teslize) ---------- */
:root.customer-teslize:not(#tz-ios-x) .cuenta-main{font-family:var(--tz-sf)!important}
:root.customer-teslize:not(#tz-ios-x) .cuenta-main :is(h1,h2,h3){font-family:var(--tz-sfd)!important;font-weight:700!important;letter-spacing:-.035em!important}
:root.customer-teslize:not(#tz-ios-x) .cuenta-state{border-radius:32px!important;box-shadow:var(--tz-shadow)!important}
:root.customer-teslize:not(#tz-ios-x) .cuenta-auth-card{border:0!important;border-radius:var(--tz-r)!important;background:var(--tz-cream)!important}
:root.customer-teslize:not(#tz-ios-x) :is(.account-google,.account-google-button){border-radius:16px!important}
:root.customer-teslize:not(#tz-ios-x) :is(.cuenta-cta,.payment-result-cta){border-radius:999px!important;transition:transform .45s var(--tz-spring),background-color .2s}
:root.customer-teslize:not(#tz-ios-x) :is(.cuenta-cta,.payment-result-cta):active{transform:scale(.965)}
:root.customer-teslize:not(#tz-ios-x) #payment-result.payment-result-card{border-radius:32px!important}

:root.customer-teslize:not(#tz-ios-x) .shop-global-search{border-radius:999px!important}
:root.customer-teslize:not(#tz-ios-x) .shop-global-search input{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important}
:root.customer-teslize:not(#tz-ios-x) .shop-global-search button{border-radius:999px!important}
:root.customer-teslize:not(#tz-ios-x) .cart-fab{border-radius:999px!important;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25)!important}

/* =====================================================================
   ANIMACIONES iOS (solo transform/opacity; sin JavaScript)
   ===================================================================== */
@supports (animation-timeline:view()){
  :root.customer-teslize:not(#tz-ios-x) :is(.tesla-model-grid>a,.tesla-product-card,.teslize-list-card,.teslize-generation-grid>*,.teslize-process-grid>*,.teslize-value-card,.teslize-workflow ol>li,.tesla-finder,.teslize-filters,.teslize-configurator-panel,.ep-quick-contact,.home-pickup-shell,.teslize-cross-nav nav>*,.teslize-model-shortcuts nav>*,.teslize-compatible-models nav>*){animation:tz-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  :root.customer-teslize:not(#tz-ios-x) :is(.teslize-section-heading,.commerce-section-head,.landing-finder-intro,.teslize-configurator-intro,.teslize-final-cta h2,.teslize-contact-context h2){animation:tz-reveal-soft linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  /* titular grande que se recoge al bajar */
  :root.customer-teslize:not(#tz-ios-x) :is(.commerce-hero-copy,.teslize-page-hero h1){animation:tz-large-title linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  :root.customer-teslize:not(#tz-ios-x) .commerce-hero-backdrop{animation:tz-hero-depth linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  :root.customer-teslize:not(#tz-ios-x) .teslize-detail-media img{animation:tz-media-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  /* la barra gana opacidad y sombra según bajas */
  :root.customer-teslize:not(#tz-ios-x) .landing-header{animation:tz-bar linear both;animation-timeline:scroll(root);animation-range:0 160px}
}
:root.customer-teslize:not(#tz-ios-x)::view-transition-old(root){animation:tz-page-out .32s var(--tz-ease) both!important}
:root.customer-teslize:not(#tz-ios-x)::view-transition-new(root){animation:tz-page-in .5s var(--tz-ease) both!important}
:root.customer-teslize:not(#tz-ios-x) #ep-cookie-banner{animation:tz-sheet-up .7s var(--tz-spring) .5s both}
:root.customer-teslize:not(#tz-ios-x) .cart-quote-modal[open],:root.customer-teslize:not(#tz-ios-x) #ep-cookie-settings[open]{animation:tz-modal-in .55s var(--tz-spring) both}
:root.customer-teslize:not(#tz-ios-x) .ep-soft-options:not([hidden]){transform-origin:top center;animation:tz-menu-in .38s var(--tz-spring) both}
:root.customer-teslize:not(#tz-ios-x) .landing-panel:not([hidden]){transform-origin:top right;animation:tz-menu-in .42s var(--tz-spring) both}
:root.customer-teslize:not(#tz-ios-x) .cart-fab{animation:tz-pop .6s var(--tz-spring) .9s both}

@keyframes tz-reveal{from{opacity:0;translate:0 42px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes tz-reveal-soft{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes tz-large-title{to{opacity:.25;translate:0 -46px;scale:.96}}
@keyframes tz-hero-depth{to{scale:1.06;opacity:.6}}
@keyframes tz-media-drift{to{scale:1.06}}
@keyframes tz-bar{from{background-color:rgba(255,255,255,.62)}to{background-color:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(0,0,0,.08)}}
@keyframes tz-page-out{to{opacity:0;scale:.985}}
@keyframes tz-page-in{from{opacity:0;scale:1.015;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
@keyframes tz-sheet-up{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes tz-modal-in{from{opacity:0;translate:0 34px;scale:.95}to{opacity:1;translate:0 0;scale:1}}
@keyframes tz-menu-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes tz-pop{0%{opacity:0;scale:.6}100%{opacity:1;scale:1}}

@media (prefers-reduced-motion:reduce){
  :root.customer-teslize:not(#tz-ios-x) *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- móvil ---------- */
@media (max-width:760px){
  :root.customer-teslize:not(#tz-ios-x){--tz-r:20px;--tz-r-m:18px}
  :root.customer-teslize:not(#tz-ios-x) .teslize-detail-media{clip-path:inset(0 12px 12px 12px round 24px)}
  :root.customer-teslize:not(#tz-ios-x) :is(.tesla-model-grid,.teslize-generation-grid,.teslize-process-grid){gap:10px!important}
  :root.customer-teslize:not(#tz-ios-x) .cart-drawer{border-radius:24px 24px 0 0!important}
  :root.customer-teslize:not(#tz-ios-x) .landing-header-quote{min-height:36px;padding:0 14px!important;font-size:13.5px!important}
}

/* ---------- auditoría móvil (30/09): textos pequeños legibles (mín. 11 px) y buscador alineado ---------- */
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card) header>p,
:root.customer-teslize:not(#tz-ios-x) .tesla-model-grid>a>span.tesla-model-index,
:root.customer-teslize:not(#tz-ios-x) .tesla-model-grid>a>div>:is(p,b),
:root.customer-teslize:not(#tz-ios-x) .tesla-products-all,
:root.customer-teslize:not(#tz-ios-x) .tesla-workshop-media>span,
:root.customer-teslize:not(#tz-ios-x) :is(.teslize-cross-nav,.teslize-model-shortcuts,.teslize-compatible-models,.teslize-contact-layout) nav>a>span,
:root.customer-teslize:not(#tz-ios-x) .teslize-detail-media figcaption span,
:root.customer-teslize:not(#tz-ios-x) .teslize-catalog-tools>label,
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-fields label>span,
:root.customer-teslize:not(#tz-ios-x) .teslize-configurator-total>span,
:root.customer-teslize:not(#tz-ios-x) .teslize-value-card__proof span,
:root.customer-teslize:not(#tz-ios-x) .teslize-value-card__top :is(b,span),
:root.customer-teslize:not(#tz-ios-x) .teslize-contact-context aside>span,
:root.customer-teslize:not(#tz-ios-x) .commerce-home dl>div>dt{font-size:11.5px!important;letter-spacing:.03em!important;line-height:1.3!important}
:root.customer-teslize:not(#tz-ios-x) :is(.tesla-product-card,.teslize-list-card) figure>span{font-size:11px!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder .vehicle-finder-fields label{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder .vehicle-finder-head{flex-wrap:wrap!important;row-gap:6px!important}
:root.customer-teslize:not(#tz-ios-x) .tesla-finder .vehicle-finder-head :is(strong,a){white-space:nowrap}
:root.customer-teslize:not(#tz-ios-x) .shop-footer--teslize nav a{display:inline-block;padding:7px 0!important}
:root.customer-teslize:not(#tz-ios-x) .teslize-breadcrumb a{display:inline-block;padding:10px 2px!important;margin:-10px 0!important}
/* Auditoría visual 01/10: los botones de teléfono y WhatsApp del pie tenían padding horizontal 0 (heredado de los enlaces del pie) */
:root.customer-teslize:not(#tz-ios-x) .shop-footer--teslize .ep-contact-links a{display:inline-flex!important;align-items:center;gap:8px;width:max-content;padding:9px 16px 9px 12px!important;border-radius:999px!important}
/* 01/10: separador recto sobre «Continuar con Google» y zona táctil de 44 px en los enlaces de cuenta de la cesta */
:root.customer-teslize:not(#tz-ios-x) .account-google{border-radius:0!important}
:root.customer-teslize:not(#tz-ios-x) :is(.cart-account-strip a,.cart-account-link){display:inline-block;padding-block:12px;margin-block:-12px}
